CSS3 rotateY transition 没有正确地绕 y 轴旋转

Question

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

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

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

Answer 1

好吧，这里有一大堆问题:

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

2) -webkit-perspective 只影响应用它的元素的子元素，而不影响元素本身。阅读 Safari blog对此:

The interesting thing about -webkit-perspective is that it does not affect the element directly. Instead, it affects the appearance of the 3D transforms on the transformed descendants of that element; you can think of it as adding a transform that gets multiplied into the descendant transforms. This allows those descendants to all share the same perspective as they move around.

3) 你发布了一个 fiddle 真是太棒了，但由于这是一个 CSS 问题，为了将来的引用，如果你清除所有的 javascript，并且只使用一组浏览器前缀，就会容易得多。帮助我们帮助您!

4) 您可能想要使用的是动画。这是您的 fiddle 的高度修改版本，可在悬停时使用:

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

5) 如果 javascript 是您的技能集，并且您完全关心浏览器兼容性(您当然是!)，我强烈建议使用 jstween 制作此类动画。 .