CSS3过渡旋转Y没有正确绕Y轴

Question

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

当过渡运行，你可以看到左侧的约20-30像素的填充。尽管事实上我已经将transform-origin设置为0,0,0，但它仍然没有正确地绕y轴旋转。在动画期间，蓝色盒子的左边缘应始终与左手边缘齐平。

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

Answer 1

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

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

Answer 2

好了，还有一大堆的问题在这里：

1）CSS变换是不能设置动画使用过渡。如果您查看可转换属性的W3C list，您会注意到转换不存在。

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

约-webkit-角度有趣的是，它不 直接影响的元素。相反，它会影响该元素转换后代上3D变换的外观;你可以把它看作是添加一个变换，它被乘以 后代变换。这允许这些后代在他们四处移动时共享相同的视角。

3）这真棒，你贴了小提琴，但由于这是一个CSS问题，以供将来参考它本来是一个容易得多，如果你清除了所有的JavaScript，并用一组浏览器只前缀。帮助我们帮助你！

4）你可能想要使用的是一个动画。下面是悬停作品的小提琴高度改良的版本：

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

5）如果JavaScript是你的技能，以及你在所有关心浏览器的兼容性（当然你）我强烈建议用jstween来做这些动画。