-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.