究竟-webkit-transform: translate3d(0,0,0); 是做什么的？它有任何性能问题吗？我应该将它应用于身体还是单个元素？它似乎极大地改善了滚动事件。
谢谢你的课！
问问题
92696 次
5 回答
121
-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. 有关详细信息，请参阅这篇文章。
于 2013-08-30T09:26:54.367 回答
12
我在这里没有看到解释这一点的答案。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);
}
于 2014-02-18T00:58:22.330 回答
6
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);
}
于 2013-09-09T13:47:32.743 回答
5
Translate3D 强制硬件加速。CSS 动画、变换和过渡不会自动GPU加速，而是从浏览器较慢的软件渲染引擎执行。为了使用 GPU，我们使用 translate3d
目前，像 Chrome、FireFox、Safari、IE9+ 和最新版本的 Opera 等浏览器都带有硬件加速功能，它们只有在有迹象表明 DOM 元素会从中受益时才会使用它。
于 2013-08-30T09:29:51.970 回答
4
请注意，它会创建一个堆叠上下文（加上其他答案所说的），因此它确实可能会对您看到的内容产生影响，例如，在不应该出现的情况下使某些内容出现在叠加层上。
于 2017-08-17T23:02:55.297 回答