Question

-webkit-transform: translate3d(0,0,0);到底做了什么？它有任何性能问题吗？我应该将它应用于身体或个体元素吗？它似乎大大改善了滚动事件。

谢谢你的教训！

Answer 1

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

找到一个好的阅读Here

本机应用程序可以访问设备的图形处理单元（GPU）让像素飞起来。另一方面，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。有关详细信息，请参阅this article。

Answer 2

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

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

希望这是有道理的，如果您有任何其他问题，请告诉我。

要回答您的问题，translate3d: 0x 0y 0z将无效，因为转换直接处理通过将div的顶点运行到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);
}

Answer 3

Translate3D强制硬件加速 .CSS动画，转换和转换不会自动 GPU 加速，而是从浏览器较慢的软件渲染引擎执行。为了使用GPU我们使用translate3d

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

Answer 4

在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);
}

Answer 5

请注意，它会创建stacking context （加上其他答案所说的内容），因此可能会对您看到的内容产生影响，例如如果不应该在叠加层上显示某些东西。

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

5 个答案: