我很难使用CSS过渡在webkit中旋转一个完整的360度项目。
我创建了一个JS小提琴来展示我正在尝试做的事情：http://jsfiddle.net/russelluresti/PnTk8/2/
过渡应分两步进行。首先，项目应该沿Y轴旋转1/2圈。然后，一旦完成转换，它应该向相反方向旋转一整圈并缩小到原始尺寸的1/2。我遇到的问题是第二次转换只是缩放而不是旋转，即使rotateY(-360deg)和rotateY(0deg)的旋转值应该导致完全旋转。
这只是一个概念验证，所以我目前只针对webkit。但是，我想坚持过渡，而不是关键帧动画。有什么想法吗？
答案 0 :(得分：1)
据我所知，从rotateY（-180deg）旋转到rotateY（-360deg）将与rotateY（0）相同。让我们这样说吧：想象你在同一个方向翻转一张纸两次，就像一开始就完全一样。因此，浏览器将其视为“完全没有变化”，因此在轮换时没有转换。
另一个例子会让这更清楚：
给出度设置为你的情况，rotateY（-90deg）=＆gt; rotateY（-300deg）=＆gt; rotateY（60deg）可以正常工作，第二次转换不会启动。相对于原始状态的Becuz：rotateY（0），rotateY（-300deg）与rotateY（60deg）处于同一状态。