CSS3 rotateY过渡不能绕y轴正确旋转

Question

我有以下代码： http://jsfiddle.net/RFMxG/1/

转换运行时，您可以在左侧看到大约20-30像素的填充。尽管我已经将变换原点设置为0,0,0，但它仍然没有正确地围绕y轴旋转。在动画过程中，蓝框的左边缘应始终与左手边缘齐平。

有谁能告诉我我做错了什么？

Answer 1

好的，这里有很多问题：

1）CSS转换不能使用转换进行动画处理。如果您查看可转换属性的W3C list，您会注意到转换不存在。

2）-webkit-perspective仅影响它所应用元素的子元素，而不影响元素本身。阅读Safari blog：

  

关于-webkit-perspective的有趣之处在于它没有   直接影响元素。相反，它会影响外观   3D转换该元素的变换后代;您可以   把它想象成添加一个变换成倍增的变换   后代变换。这允许那些后代全部分享   他们四处走动时的观点相同。

3）你发布了一个小提琴很棒，但由于这是一个CSS问题，为了将来参考，如果你清理掉所有的javascript，并且只使用一组浏览器前缀，那将会容易得多。帮助我们帮助您！

4）你可能想要使用的是动画。这是一个高度修改的小提琴版本，适用于悬停：

http://jsfiddle.net/RFMxG/4/

5）如果javascript是你的技能组合，而你完全关心浏览器的兼容性（当然你也是！），我强烈建议用jstween进行这类动画。

Answer 2

是的，所以解决方案实际上是由于需要在动画开始之前设置变换原点（它不能在设置-webkit-transform属性的同时设置）。

我已经更新了小提琴，以证明现在可以正常工作。 http://jsfiddle.net/RFMxG/5/