标签：
-webkit-transform: translateZ(0);
-webkit-transform: translate3d(0,0,0);
作用：
1、切换到硬件合成模式，通常所有事情都CPU完成，硬件影像合成模式会将指定元素传给GPU 处理
2、创建一个新的图层，带有自己的backing surface(a graphics context into which layers are drawn)，通常来说并不是所有新建的图层都有自己的backing surface，大部分情况它们会共享一个。
CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发GPU渲染，请合理使用
chrome环境下决定是否应该带有自己的backing surface条件：
The layer has 3D or perspective transform CSS properties.
The layer is used by <video> element using accelerated video decoding.
The layer is used by a <canvas> element with a 3D context or accelerated 2D context.
The layer is used for a composited plugin, e.g. Flash or Silverlight.
The layer uses a CSS animation for its opacity or uses an animated webkit transform.
The layer uses accelerated CSS filters.
The layer has a descendant that is a compositing layer.
The layer has a sibling with a lower z-index which has a compositing layer (in other words the layer is rendered on top of a composited layer).
但在移动设备上，无限制的使用这个Hack会变得一团糟，因为它们的视频存储器(Video Random Access Memory)非常有限，所以很容易耗尽而导致渲染效果很不好。backing surface实质上是一种需要上传至GPU ，由它影像合成的结构。影像合成的过程中每一个独立的结构都需要上传到GPU然后按顺序被绘制出来。
同时使用：
backface-visibility: hidden; perspective:1000;
When working with 3d transform. Even "fake" 3D transforms. Experience tells me that these two lines always improve performances, especially on iPad but also on Chrome.
null transform hack 强制使用硬件加速
标签：
原文地址：http://www.cnblogs.com/chuangweili/p/5163002.html
