我正在尝试使用以下CSS代码在Z轴上为HTML元素创建一个简单的动画：
-webkit-transition: -webkit-transform 1000ms ease 500ms;
-webkit-transform: perspective(100px) translate3d(0px, 0px, -20px);
问题是没有为Z轴执行动画（只是在动画结束时突然跳转）。如果我切换轴，例如X，则动画正确执行。
编辑：如果我混合轴，则仅对X轴和Y轴执行动画，当动画结束时，元素将移动到Z轴上的正确位置（突然跳起来。）
在FireFox中使用相同的CSS代码（没有供应商前缀）可以正常工作，该元素在每个轴上都是动画的，包括Z.
这是Chrome特定的问题，还是我错误地使用了转换元素？
Edit2 ：使用示例代码(link)创建了一个JSFiddle
答案 0 :(得分：0)
透视是一个单独的东西，不是变换的一部分。
-webkit-transform: perspective(100px) translate3d(0px, 0px, -20px);
应该是：
-webkit-perspective: 100px;
-webkit-transform: translate3d(0px, 0px, -20px);
此外，您需要定义关于元素周围事物的透视图。
我已经用一个名为#stage的元素包围了你的元素，而是设置了它的视角。
显示要做的事情。