什么是 -webkit-transform: translate3d(0,0,0);到底做什么？适用于身体？

Question

-webkit-transform: translate3d(0,0,0);

到底是做什么的？ 它有任何性能问题吗？我应该只将它应用于身体或个别元素吗？它似乎大大改善了滚动事件。

谢谢你的课！

Answer 1

-webkit-transform: translate3d(0,0,0);

让一些设备运行他们的硬件加速。

找到一本好书这里

本机应用程序可以访问设备的图形处理单元 (GPU) 让像素飞起来。另一方面，Web 应用程序运行在 浏览器的上下文，它让软件做大部分事情（如果不是 all) 的渲染，导致过渡的马力降低。 但是 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

。有关更多信息，请参阅这篇文章。

Answer 2

我在这里没有看到解释这个的答案。通过使用一组复杂的验证计算每个

div

及其选项，可以完成许多转换。但是，如果您使用 3D 函数，则您拥有的每个 2D 元素都被视为 3D 元素，我们可以动态地对这些元素执行 matrix transformation。然而，大多数元素在“技术上”已经是硬件加速的，因为它们都使用 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);
}

Answer 3

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 4

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

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

Answer 5

注意它创建了一个堆叠上下文（加上其他答案所说的内容），因此它does可能会对您看到的内容产生影响，例如让某些东西出现在不应该出现的覆盖层上。

Answer 6

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