我有以下代码： http://jsfiddle.net/RFMxG/1/
转换运行时，您可以在左侧看到大约20-30像素的填充。尽管我已经将变换原点设置为0,0,0，但它仍然没有正确地围绕y轴旋转。在动画过程中，蓝框的左边缘应始终与左手边缘齐平。
有谁能告诉我我做错了什么？
答案 0 :(得分：0)
好的，这里有很多问题：
1）CSS转换不能使用转换进行动画处理。如果您查看可转换属性的W3C list，您会注意到转换不存在。
2）-webkit-perspective仅影响它所应用元素的子元素，而不影响元素本身。阅读Safari blog：
关于-webkit-perspective的有趣之处在于它没有 直接影响元素。相反，它会影响外观 3D转换该元素的变换后代;您可以 把它想象成添加一个变换成倍增的变换 后代变换。这允许那些后代全部分享 他们四处走动时的观点相同。
3）你发布了一个小提琴很棒，但由于这是一个CSS问题，为了将来参考，如果你清理掉所有的javascript，并且只使用一组浏览器前缀，那将会容易得多。帮助我们帮助您！
4）你可能想要使用的是动画。这是一个高度修改的小提琴版本，适用于悬停：
5）如果javascript是你的技能组合，而你完全关心浏览器的兼容性（当然你也是！），我强烈建议用jstween进行这类动画。
答案 1 :(得分：0)
是的，所以解决方案实际上是由于需要在动画开始之前设置变换原点（它不能在设置-webkit-transform属性的同时设置）。
我已经更新了小提琴，以证明现在可以正常工作。 http://jsfiddle.net/RFMxG/5/