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