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