css - Webkit CSS 过渡旋转不旋转

Question

我在使用 CSS 过渡在 webkit 中将元素旋转​​ 360 度时遇到困难。

我创建了一个 JS Fiddle 来展示我正在尝试做的事情:http://jsfiddle.net/russelluresti/PnTk8/2/

过渡应该分两步进行。首先，该元素应仅沿 Y 轴旋转 1/2 圈。然后，一旦该过渡完成，它应该向相反方向旋转一整圈并缩小到原始尺寸的 1/2。我遇到的问题是第二个转换只是缩放而不是旋转，即使 rotateY(-360deg) 和 rotateY(0deg) 的旋转值应该导致完全旋转。

这只是一个概念验证，所以我目前只针对 webkit。但是，我想坚持使用过渡，而不是关键帧动画。有什么想法吗？

Answer 1

据我所知，从 rotateY(-180deg) 旋转到 rotateY(-360deg) 与 rotateY(0) 的状态相同。这么说吧:想象一下，你把一张纸朝同一个方向翻两次，会和一开始的状态完全一样。结果，浏览器认为它“根本没有变化”，因此在旋转时没有过渡。

另一个例子会让这个更清楚:

给定度数。设置为你的情况， rotateY(-90deg) => rotateY(-300deg) => rotateY(60deg) 会工作一样，第二个过渡不会开始。因为相对于原始状态:rotateY(0)，rotateY(-300deg)刚好和rotateY(60deg)处于同一状态。