相对于translateZ（0）的CSS性能

Question

许多博客都表示，通过“ transform: translateZ(0)加速” GPU来提高动画和过渡的速度，可以认为元素是3D，从而提高了性能。我想知道以下列方式使用此转换是否有影响：

* {

    -webkit-transform: translateZ(0);

    -moz-transform: translateZ(0);

    -ms-transform: translateZ(0);

    -o-transform: translateZ(0);

    transform: translateZ(0);

}

Answer 1

CSS转换会创建一个新的堆栈上下文并包含该块，如规范中所述。用通俗易懂的英语来说，这意味着对固定位置的元素应用了转换后，它们的行为将更像绝对定位的元素，并且z-index值很容易被拧紧。如果您看一下这个演示，您将明白我的意思。第二个div应用了转换，这意味着它创建了一个新的堆叠上下文，并且伪元素堆叠在顶部而不是下面。所以基本上，不要那样做。仅在需要优化时才应用3D变换。-webkit-font-smoothing: antialiased;是利用3D加速而不产生这些问题的另一种方法，但它仅在Safari中有效。

Answer 2

如果您希望获得启示，在某些情况下启用了硬件加速功能，Google Chrome的性能将非常糟糕。奇怪的是，将“技巧”更改为-webkit-transform: rotateZ(360deg);正常就可以了。我不相信我们曾经想出原因。