javascript - 加载CSS图像翻转

我为此感到难过，希望有人能提供帮助。

我有一个用HTML完成的页面背景，并显示了客户的Instagram照片。使用此插件：justifiedgrid.com

客户端真的希望图像像这样http://www.starworksartists.com/hair/adir-abergel/instagram/在页面加载时翻转

我试图像这样将CSS添加到图像中

.jig-loaded  img {
    transition: 0s cubic-bezier(0.175, 0.885, 0.32, 1.1) !important;
    transform: rotateY(0deg) translateX(0px) !important;
    opacity: 1;
}

但似乎不起作用。

任何帮助，将不胜感激。

最佳答案

您可以使用CSS关键帧动画：

img {
  -webkit-animation: flip 1s;
  animation: flip 1s;
}
@-webkit-keyframes flip {
  from {
    transform: rotateY(90deg)
  }
  to {
    transform: rotateY(0deg)
  }
}
@keyframes flip {
  from {
    transform: rotateY(90deg)
  }
  to {
    transform: rotateY(0deg)
  }
}

<img src="http://i.stack.imgur.com/vNQ2g.png?s=128&g=1" />