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转换创建一个新的堆叠上下文并包含块，如the spec.中所述。在简单的英语中，这意味着应用了转换的固定位置元素将更像绝对定位的元素，{{1价值可能会被搞砸。

如果你看一下this demo，你会明白我的意思。第二个div应用了一个转换，意味着它创建了一个新的堆叠上下文，而伪元素则堆叠在顶部而不是下面。

所以基本上，不要这样做。仅在需要优化时应用3D转换。 z-index是另一种利用3D加速而不会产生这些问题的方法，但它只适用于Safari。

Answer 2

如果你想要暗示，in some scenarios Google Chrome performance is horrible with hardware acceleration enabled。奇怪的是，将“技巧”改为-webkit-transform: rotateZ(360deg);工作得很好。

我不相信我们曾经弄明白为什么。

Answer 3

它强制浏览器使用硬件加速来访问设备的图形处理单元（GPU）以使像素飞起。另一方面，Web应用程序在浏览器的上下文中运行，这使得软件可以完成大部分（如果不是全部）渲染，从而减少了转换的马力。但是Web一直在追赶，大多数浏览器厂商现在通过特定的CSS规则提供图形硬件加速。

使用-webkit-transform: translate3d(0,0,0);将使GPU转换为CSS过渡的动作，使它们更平滑（更高的FPS）。

注意： translate3d(0,0,0)对您所看到的内容不执行任何操作。它在x，y和z轴上将对象移动0px。这只是一种强制硬件加速的技术。

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

Answer 4

我可以证明-webkit-transform: translate3d(0, 0, 0);会混淆新的position: -webkit-sticky;属性。使用我正在处理的左抽屉导航模式，我想要的转换属性的硬件加速是弄乱我的顶部导航栏的固定位置。我关闭了变换，定位工作正常。

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

Answer 5

在移动设备上将所有内容发送到GPU将导致内存过载并导致应用程序崩溃。我在Cordova的iPad应用程序上遇到过这个问题。最好只将所需的项目发送到GPU，即您专门移动的div。

更好的是，使用3d 过渡变换来完成动画，如translateX（50px）而不是左：50px;

CSS性能相对于translateZ（0）

5 个答案: