Webkit CSS 过渡旋转不旋转答案

【问题标题】：Webkit CSS Transitioning Rotation Not SpinningWebkit CSS 过渡旋转不旋转
【发布时间】：2012-04-27 02:31:05
【问题描述】：

我在使用 CSS 过渡在 webkit 中将项目旋转 360 度时遇到了困难。

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

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

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

【问题讨论】：

标签： css webkit

【解决方案1】：

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

另一个例子会更清楚：

给定度数。根据您的情况设置，rotateY(-90deg) => rotateY(-300deg) => rotateY(60deg) 将同样工作，第二个转换不会开始。因为相对于原始状态：rotateY(0), rotateY(-300deg) 与rotateY(60deg) 处于同一状态。

【讨论】：

虽然视图可能相同，但 0 度旋转和 -360 度旋转之间存在差异。我整理了一个小小提琴，以表明您可以在 0 到 -360 度旋转之间转换项目：jsfiddle.net/russelluresti/LXv5v 出于某种原因，它在我的示例中无法按预期工作，当它是第二次转换时。
@RussellUresti 我刚刚重新制作了一个演示来模仿您的案例：jsfiddle.net/linmic/CpdJG，它可以按照您的意愿完美运行。就您原来的情况而言，仍然无法解决问题。
这似乎有效。我不太清楚这和我的代码之间有什么不同（除了不应该产生影响的东西，比如定位图像而不是容器），但它看起来像是一个很好的基线，然后开始重新应用我想要的定位和标记。谢谢。