0

我正在尝试使用以下 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 （链接）

4

1 回答 1

0

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

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

应该：

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

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

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

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

显示要做什么。

于 2013-04-07T10:18:31.937 回答