Chrome 上的 Z 转换未执行动画答案

【问题标题】：Animation not performed for Z transition on ChromeChrome 上的 Z 转换未执行动画
【发布时间】：2013-04-07 20:18:06
【问题描述】：

我正在尝试使用以下 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：使用示例代码创建了一个 JSFiddle (link)

【问题讨论】：

在转换前明确转换值。也许有帮助。
没有，我只是将上面的CSS元素添加到页面中的一个div中，然后刷新看到过渡。
@DanOvidiuBoncut 我尝试添加一个转换，在我添加转换之前将全部重置为 0，并且相同的行为不会改变：X 轴和 Y 轴正确动画，但 Z 轴在动画结束之前保持静止。
你能把你的元素和css的内容添加到一个jsfiddle吗？据我所知，过渡是由一个事件开始的：悬停，单击，聚焦，添加一个类，但不是通过刷新。为什么不尝试制作动画？
@DanOvidiuBoncut 在上面的问题表单中添加了一个带有示例的 JSFiddle。

【解决方案1】：

透视是一个独立的东西，不是变换的一部分。

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

应该是：

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

此外，您需要定义元素周围事物的视角。

我已经用一个名为 #stage 的元素包围了你的元素，改为设置视角。

显示要做什么。

【讨论】：