-webkit-transform: translate3d(0,0,0);使某些设备运行其硬件加速。
找到一个好的读数Here
本机应用程序可以访问设备的图形处理单元（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上由于转换而出现 Flink ，请尝试-webkit-backface-visibility: hidden和-webkit-perspective: 1000。更多信息请参考this article。

我在这里没有看到解释这个问题的答案。通过使用一组复杂的验证来计算每个div及其选项，可以完成许多转换。但是，如果您使用3D函数，则您拥有的每个2D元素都被视为3D元素，并且我们可以在这些元素上执行矩阵转换。然而，大多数元素“技术上”已经是硬件加速的，因为它们都使用GPU。但是，3D变换直接作用于这些2D渲染的每个缓存版本（或div的缓存版本），并直接对它们使用矩阵变换（这是矢量化和并行化的FP数学）。
需要注意的是，3D转换只会对缓存的2D div上的特征进行更改（换句话说，div已经是渲染的图像）。因此，更改边框宽度和颜色等事情不再是“3D”的模糊说法。如果你想一想，更改边框宽度需要重新渲染div，因为并重新缓存它，以便可以应用3D转换。
希望这是有意义的，让我知道如果你有任何更多的问题。
为了回答你的问题，translate3d: 0x 0y 0z不会做任何事情，因为变换直接作用于通过将div的顶点运行到GPU着色器中形成的纹理。这个着色器资源现在被缓存，并且在绘制到帧缓冲区时将应用矩阵。所以，基本上这样做没有任何好处。
这是浏览器内部的工作方式。

第一步：解析输入

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

第二步：开发复合层

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.

第三步：渲染合成图层

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加速，而是通过浏览器较慢的软件渲染引擎执行。为了使用GPU，我们使用Translate3d
目前，Chrome、FireFox、Safari、IE9+和最新版本的Opera等浏览器都带有硬件加速功能，只有在有迹象表明DOM元素将从中受益时才会使用它。

请注意，它创建了一个stacking context（加上其他答案所说的），所以它 * 确实 * 可能会对您所看到的内容产生影响，例如，使某些内容在不应该出现的情况下出现在覆盖层上。

我正在使用mathlive和tiptap，在我的例子中，这一行导致在编辑公式时无意中滚动到页面顶部。