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 回答