相对于translateZ CSS性能（0）相对于translateZ CSS性能（0）(CSS p

许多博客都表示在“欺骗”的GPU认为元件是3D用的性能增益transform: translateZ(0)以加快动画和过渡。如果有使用以下方式此转换的影响我想知道：

* {
    -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:

如果你想影响，在某些情况下谷歌浏览器的性能是可怕的启用硬件加速。奇怪的是，改变所述“特技”到-webkit-transform: rotateZ(360deg); 工作只是罚款。

我不相信我们曾经想通了，为什么。

Answer 3:

它强制使用硬件加速来访问设备的图形处理单元（GPU），使像素飞浏览器。 Web应用程序，而另一方面，在浏览器中，它可以让软件的上下文中运行做的大部分（如果不是全部）的渲染，从而为过渡较小的功率。但网络已经被赶超，现在大多数浏览器厂商通过特定CSS规则来提供图形硬件加速。

使用-webkit-transform: translate3d(0,0,0); 会踢成GPU为CSS过渡作用，使他们更流畅（高FPS）。

注： translate3d(0,0,0)什么也不做在你所看到的条款。它通过在0像素的x，y和z轴移动的对象。这只是迫使硬件加速技术。

这里良好的阅读： http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

Answer 4:

我可以证明的事实， -webkit-transform: translate3d(0, 0, 0); 会搞乱新position: -webkit-sticky; 属性。随着我工作在左抽屉导航模式，硬件加速，我想与变换属性与我的顶部导航栏的固定位置搞乱。我关掉变换和定位工作的罚款。

幸运的是，我似乎有硬件加速上已经，因为我有-webkit-font-smoothing: antialiased在html元素。我测试在iOS7和Android此行为。

Answer 5:

在所有发送到GPU的移动设备会导致内存过载和应用程序崩溃。我遇到了这个在科尔多瓦的iPad应用程序。最好只发送所需物品的GPU，那你具体走动的div。

更重要的是，使用3D 转换变换做这样平移X（50像素），而不是留在动画：50像素;

文章来源: CSS performance relative to translateZ(0)