-webkit-transform是什么：translate3d（0,0,0）; 到底是做什么的？适用于身体？

到底-webkit-transform: translate3d(0,0,0); 是做什么的？有性能问题吗？我应该将其应用于身体还是单个元素？似乎可以大大改善滚动事件。

感谢您的教训！

-webkit-transform: translate3d(0,0,0); 使某些设备运行其硬件加速。

在这里找到了很好的阅读

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

使用-webkit-transform: translate3d(0,0,0);将使GPU投入CSS过渡的操作，使其更加平滑（较高的FPS）。

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

另一种选择是-webkit-transform: translateZ(0)。如果Chrome和Safari由于转换而闪烁，请尝试-webkit-backface-visibility: hidden和-webkit-perspective: 1000。有关更多信息，请参阅本文。

我在这里没有看到解释此问题的答案。通过div使用一组复杂的验证来计算和及其每个选项，可以完成许多转换。但是，如果您使用3D函数，则您拥有的每个2D元素都将被视为3D元素，我们可以动态地对这些元素执行矩阵变换。但是，大多数元素在硬件上已经“技术上”加速，因为它们都使用GPU。但是，3D转换可直接在每个2D渲染的缓存版本（或的缓存版本div）上工作，并直接在其上使用矩阵转换（矢量化和并行化FP数学）。

重要的是要注意，3D变换仅更改缓存的2D div上的要素（换句话说，该div已经是渲染图像）。因此，模糊地说，诸如更改边框宽度和颜色之类的内容不再是“ 3D”。如果考虑到这一点，更改边框宽度要求您重新渲染div因为并重新缓存它，以便可以应用3D变换。

希望这有道理，如果您还有其他问题，请告诉我。

要解决您的问题，translate3d: 0x 0y 0z将无能为力，因为这些转换直接在div将GPU的顶点运行到GPU着色器中形成的纹理上起作用。现在将缓存此着色器资源，并且在绘制到帧缓冲区时将应用矩阵。因此，这样做基本上没有任何好处。

这就是浏览器内部的工作方式。

步骤1：解析输入

<div style = "position:absolute;left:0;right:0;bottom:0;top:0;"></div>

步骤2：开发复合层

CompositeLayer compLayer = new CompositeLayer();
compLayer.setPosition(0, 0, 0, 0);
compLayer.setPositioning(ABSOLUTE); // Note. this is psuedocode. The actual code
Pipeline.add(compLayer, zIndex); // would be significantly more complex.

步骤3：渲染复合层

for (CompositeLayer compLayer : allCompositeLayers){

     // Create and set cacheTexture as active target
     Texture2D cacheTexture = new Texture2D();
     cacheTexture.setActive();

     // Draw to cachedTexture
     Pipeline.renderVertices(compLayer.getVertices());
     Pipeline.setTexture(compLayer.getBackground());
     Pipeline.drawIndexed(compLayer.getVertexCount());

     // Set the framebuffer as active target
     frameBuffer.setActive();

     // Render to framebuffer from texture and **applying transformMatrix**
     Pipeline.renderFromCache(cacheTexture, transformMatrix);
}

在MobileSafary（iOS 5）中滚动存在一个错误，该错误导致出现工件作为滚动容器中输入元素的副本。

对每个子元素使用translate3d可以修复该奇怪的错误。这是为我节省时间的CSS示例。

.scrolling-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.scrolling-container .child-element {
    position: relative;
    -webkit-transform: translate3d(0,0,0);
}

Translate3D会强制硬件加速。CSS动画，变换和过渡不会自动通过GPU进行加速，而是从浏览器的较慢软件渲染引擎执行。

当前，Chrome，FireFox，Safari，IE9 +和最新版本的Opera等浏览器均具有硬件加速功能，只有在有迹象表明DOM元素会从中受益时才使用它。

请注意，它会创建一个堆栈上下文（加上其他答案所说的内容），因此它确实会对您看到的内容产生影响，例如，使某些本不应该的内容出现在叠加层上。