什么-webkit-transform: translate3d(0,0,0);究竟是做什么的？适用于身体？答案

【问题标题】：what does -webkit-transform: translate3d(0,0,0); exactly do? Apply to body?什么-webkit-transform: translate3d(0,0,0);究竟是做什么的？适用于身体？
【发布时间】：2013-08-30 09:24:26
【问题描述】：

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

谢谢你的课！

【问题讨论】：

缺少什么答案：它实际上将元素在 x、y 和 z 轴上平移了 0 个像素。 ;)
它也对字体渲染有影响，尤其是在大字体大小上可见。否则平滑边缘会再次出现锯齿。可能是特定于浏览器或操作系统的，在 Windows 7 上的 Chrome 33 中观察到这一点。
@patrickj 我也开始注意到 Windows 7 上 Chrome 33 (33.0.1750.117m) 上 translate3d(0,0,0) 的行为略有不同。它使我的一个元素不可见，所以我删除了它。
供将来参考：will-change 也会将 html 元素分离到它自己的层中。 developer.mozilla.org/en-US/docs/Web/CSS/will-change。 will-change 将替换 -webkit-transform:translate3d(0,0,0) hack。
不要将它与 * css 选择器一起使用，我的所有链接都处于非活动状态:)

标签： html css webkit

【解决方案1】：

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

好书被发现Here

本机应用程序可以访问设备的图形处理单元 (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。更多信息请参考this article。

【讨论】：

我不确定在缓存纹理上应用矩阵变换是否真的会提高收益。当内容从缓存的纹理移动到帧缓冲区时，转换将提高复杂操作的性能，但对正常的绘制事件没有好处。它不会造成任何伤害，也不会带来任何好处。如果我错了，请纠正我？
我认为即使是普通的绘画也会得到加速。图层创建标准之一是“3D 或透视变换 CSS 属性”。
举个例子，bootstrap 的轮播就是使用这个，同时将显示的图像从右向左移动。
@YotamOmer 我们可以使用 translateZ(0) 或 scale3d(1,1,1) 来启动硬件加速器吗？
@Ethan 是的，根据this，两者都应该工作。我只知道 3d 转换，但显然 translateZ 在大多数浏览器中也能做到这一点。

【解决方案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);
}

【讨论】：

【解决方案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);
}

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：