动画不执行Z过渡在Chrome上

Question

我正在尝试使用以下CSS代码在HTML元素的Z轴上创建一个简单的动画:

-webkit-transition: -webkit-transform 1000ms ease 500ms;
-webkit-transform: perspective(100px) translate3d(0px, 0px, -20px);

问题是动画没有在Z轴上执行(只是在动画应该结束时突然跳跃)。如果我切换轴，例如X，那么动画将正确执行。

Edit:如果我混合轴，那么动画只在X轴和Y轴上执行，当动画结束时，元素被移动到Z轴上的正确位置(带有突然的跳跃)。

相同的CSS代码在FireFox中使用时(没有供应商前缀)可以正常工作，元素在每个轴上都是动画，包括z。

这是一个Chrome特定的问题，还是我使用转换元素不正确?

Edit2:使用示例代码创建JSFiddle (link)

Answer 1

透视图是一个独立的东西，不是transform的一部分。

-webkit-transform: perspective(100px) translate3d(0px, 0px, -20px);

应:

-webkit-perspective: 100px;
-webkit-transform: translate3d(0px, 0px, -20px);

另外，您需要定义元素周围的透视图。

我用一个名为#stage的元素包围了你的元素，而不是设置该元素的透视图。

http://jsfiddle.net/xpR2n/2/

显示该做什么