相对于translateZ（0）的CSS性能
许多博客都表示，通过使用transform: translateZ(0)来加速animation和转换，可以“欺骗”GPU来认为元素是3D。 我想知道如果以下面的方式应用这种变换，会产生什么样的影响：
* { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); }
CSS转换会创build一个新的堆栈上下文并包含块，如规范中所述。 用简单的英语来说，这意味着应用了变换的固定位置元素将更像绝对定位的元素，并且z-index值可能会被搞乱。
如果你看看这个演示 ，你会明白我的意思。 第二个div应用了一个转换，这意味着它创build一个新的堆栈上下文，伪元素堆叠在顶部而不是下面。
所以基本上，不要这样做。 只在需要优化时才应用3D变换。 -webkit-font-smoothing: antialiased; 是另一种利用3D加速而不产生这些问题的方法，但它只能在Safari中使用。
如果你想要的话， 在某些情况下，谷歌浏览器的性能是可怕的，硬件加速启用 。 奇怪的是，改变“诀窍” -webkit-transform: rotateZ(360deg); 工作得很好。
我不相信我们知道为什么。
它强制浏览器使用硬件加速访问设备的graphics处理单元（GPU）使像素飞行。 另一方面，Web应用程序运行在浏览器的上下文中，这使软件可以执行大部分（如果不是全部）的渲染，从而导致转换的function减弱。 但是networking一直在追赶，大多数浏览器厂商现在都通过特定的CSS规则来提供graphics硬件加速。
使用-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/
我可以certificate-webkit-transform: translate3d(0, 0, 0); 会混淆新的position: -webkit-sticky; 属性。 当我正在处理左侧抽屉导航模式时，我想要使用transform属性的硬件加速与我的顶级导航栏的固定位置搞混了。 我closures了转换，定位工作正常。
幸运的是，我似乎已经有硬件加速，因为我有-webkit-font-smoothing: antialiased在html元素。 我在iOS7和Android中testing了这种行为。
在移动设备上将所有内容发送到GPU将导致内存过载并使应用程序崩溃。 我在cordova的iPad应用程序中遇到过这个问题。 最好只发送所需的项目到GPU，您专门移动的divs。
更好的是，使用3d 转换转换来做像translateX（50px）的animation，而不是left：50px;
