106

transform: translateZ(0)许多博客已经表达了通过使用加速动画和过渡来“欺骗”GPU 认为元素是 3D 的性能提升。我想知道以下列方式使用此转换是否有影响：

* {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}
4

5 回答 5

106

CSS 转换创建一个新的堆叠上下文和包含块，如规范中所述。用简单的英语来说，这意味着应用了转换的固定位置元素将更像绝对定位元素，并且z-index值很可能会被搞砸。

如果你看一下这个演示，你就会明白我的意思。第二个 div 应用了一个转换，这意味着它创建了一个新的堆叠上下文，并且伪元素堆叠在顶部而不是底部。

所以基本上，不要那样做。仅在需要优化时应用 3D 变换。-webkit-font-smoothing: antialiased;是另一种在不产生这些问题的情况下利用 3D 加速的方法，但它仅适用于 Safari。

于 2012-05-30T10:26:37.330 回答
30

如果您想要暗示，在某些情况下，Google Chrome 的性能在启用硬件加速的情况下会很糟糕。奇怪的是，将“技巧”更改为-webkit-transform: rotateZ(360deg);工作正常。

我不相信我们曾经弄清楚为什么。

于 2012-05-30T10:51:42.337 回答
15

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

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

Note: translate3d(0,0,0) does nothing in terms of what you see. It moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.

Good read here: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

于 2014-09-18T21:01:33.750 回答
7

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

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

于 2014-05-09T14:32:15.903 回答
5

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

更好的是，使用 3d过渡变换来制作像 translateX(50px) 这样的动画，而不是 left:50px；

于 2013-09-10T20:51:21.177 回答