了解translateZ对3d加速的使用

Question

我刚刚浏览了odoeter.js的来源并遇到了以下代码行::

        <!-- Force 3d acceleration always and forever :) -->
        <div style="-webkit-transform: translateZ(0)"></div>

这是为了什么？我不太明白。

我正在参考 odometer.js 的此页面。

有人可以通过一个简单的例子来解释这个吗？

谢谢。

亚历山大。

Answer 1

通过使用translateZ（或其他3D动画），您可以为动画启用硬件加速，即使它是像0这样的虚假3D动画，因为它除了启用HA之外什么都不做。 HA将改善动画的流畅度。如果您计划使用javascript进行动画制作，我会看看velocity.js，它远远超过了jQuery的animate（）。看看here进行比较。

要进一步提高动画速度，请务必添加

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
backface-visibility: hidden;
perspective: 1000;

给你的动画元素。