CSS的性能相对于translateZ（0）(CSS performance relative to translateZ(0))

许多博客已经表现出“欺骗”GPU的性能增益，认为一个元素是3D，通过使用transform: translateZ(0)来加快动画和转换。 我想知道如何以下列方式应用这种变换的含义是什么？

* {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}
A number of blogs have expressed the performance gain in 'tricking' the GPU to think that an element is 3D by using transform: translateZ(0) to speed up animations and transitions. I was wondering if there are implications to using this transform in the following manner:
 
* {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

                
最满意答案
                
                    
                        
 CSS转换创建一个新的堆栈上下文并包含块，如规范中所述。 在简单的英语中，这意味着应用于它们的变换的固定位置元素将更像是绝对定位的元素，并且z-index值可能会被扭曲。 
 
 如果你看这个演示 ，你会看到我的意思。 第二个div具有应用于其的变换，意味着它创建了一个新的堆叠上下文，并且伪元素堆叠在顶部而不是下面。 
 
 所以基本上不要这样做 仅在需要优化时应用3D转换。 -webkit-font-smoothing: antialiased; 是另一种利用3D加速而不产生这些问题的方法，但它只适用于Safari。 
CSS transformations create a new stacking context and containing block, as described in the spec. In plain English, this means that fixed position elements with a transformation applied to them will act more like absolutely positioned elements, and z-index values are likely to get screwed with.
 
If you take a look at this demo, you'll see what I mean. The second div has a transformation applied to it, meaning that it creates a new stacking context, and the pseudo elements are stacked on top rather than below.
 
So basically, don't do that. Apply a 3D transformation only when you need the optimization. -webkit-font-smoothing: antialiased; is another way to tap into 3D acceleration without creating these problems, but it only works in Safari.