Webkit CSS转换旋转不旋转

我在使用CSS转换在webkit中完整旋转360度项目时遇到困难。Webkit CSS转换旋转不旋转

我创建了一个JS提琴显示我想要做的事：http://jsfiddle.net/russelluresti/PnTk8/2/

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

这只是一个概念验证，所以我现在只针对webkit。不过，我想坚持转换，而不是关键帧动画。有任何想法吗？

来源

2012-04-27 RussellUresti

据我所知，从rotateY（-180deg）旋转到rotateY（-360deg）将与rotateY（0）的状态相同。让我们这样说吧：想象你在同一个方向上翻转一张纸两次，将完全与最初的状态相同。结果，浏览器将其视为'完全没有改变'，因此在轮换时不会发生转换。

另一个例子会使这个更清晰：

给定度数。设置为你的情况，rotateY（-90deg）=> rotateY（-300deg）=> rotateY（60deg）将工作相同，第二次转换不会启动。 Becuz相对于原始状态：rotateY（0），rotateY（-300deg）与rotateY（60deg）处于相同的状态。

来源

2012-04-30 18:35:35 Linmic

尽管视图可能相同，但0度旋转和-360度旋转之间存在差异。我把一个小提琴放在一起，以表明你可以在0到-360deg之间旋转一个项目：http://jsfiddle.net/russelluresti/LXv5v/由于某些原因，它在我的例子中没有按预期工作，这是正在制定的第二个过渡。 – RussellUresti 2012-05-01 14:29:10

@RussellUresti我只是重写了一个演示来模仿你的情况：http://jsfiddle.net/linmic/CpdJG/，它可以完美地按照你的意愿。至于你原来的情况，仍然遇到麻烦。 – Linmic 2012-05-01 18:38:36

这似乎工作。我无法弄清楚这和我的代码有什么不同（除了那些不应该改变的东西，比如定位图片而不是容器），但它看起来像是一个很好的基线，重新应用我想要的定位和标记。谢谢。 – RussellUresti 2012-05-24 03:17:53

Webkit CSS转换旋转不旋转

回答

相关问题