加载时 CSS 图像翻转答案

【问题标题】：CSS Image Flip on Load加载时 CSS 图像翻转
【发布时间】：2014-12-02 21:24:49
【问题描述】：

我对此感到困惑，希望有人能提供帮助。

我有一个以 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;
}

但似乎不起作用。

任何帮助将不胜感激。

【问题讨论】：

这需要一些 JS 魔法。你可以随时检查他们的代码以获得一些想法。
你的 html 文档类型是什么？我们可以获取您的 html 示例吗？一个 html sn-p 应该会改进我们可以提供的答案。
我相信它可以用纯 CSS 完成 :)

标签： javascript jquery html css wordpress

【解决方案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)
  }
}

&lt;img src="http://i.stack.imgur.com/vNQ2g.png?s=128&amp;g=1" /&gt;

【讨论】：

【解决方案2】：

最好的方法是将图像的初始状态设置为转换后的版本，同时对其应用transition，然后使用 JavaScript 添加一个将转换设置回“正常”的类" 状态（未转换）。

这样可以很容易地跟踪状态，并且您可以在两种状态之间切换而无需在其间跳转。 Demo（onload 在演示中由 JSFiddle 处理 - 您需要自己在代码中添加）

否则，您可以在加载时使用带有animation-direction:forwards 的关键帧动画，从转换状态变为非转换状态。如果您所做的只是对初始页面加载产生影响，那很好，但如果要更具交互性，您应该改用transitions。

【讨论】：