2

我很难使用 CSS 转换在 webkit 中将项目旋转​​ 360 度。

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

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

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

4

1 回答 1

1

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

另一个例子会使这一点更清楚：

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

于 2012-04-30T18:35:35.760 回答