Html 什么 -webkit-transform: translate3d(0,0,0); 到底怎么办？适用于身体？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18529381/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
what does -webkit-transform: translate3d(0,0,0); exactly do? Apply to body?
提问by WIWIWWIISpitFire
what does -webkit-transform: translate3d(0,0,0);exactly do?
Does it have any performance issues? Should I just apply it to the body or individual elements? It seems to improve scroll events drastically.
究竟-webkit-transform: translate3d(0,0,0);是做什么的？它有任何性能问题吗？我应该将它应用于身体还是单个元素？它似乎大大改善了滚动事件。
Thanks for the lesson!
谢谢你的教训！
回答by Yotam Omer
-webkit-transform: translate3d(0,0,0);makes some devices run their hardware acceleration.
-webkit-transform: translate3d(0,0,0);使某些设备运行其硬件加速。
A good read is found Here
一个很好的阅读是在这里找到
Native applications can access the device's graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.
本机应用程序可以访问设备的图形处理单元 (GPU) 以使像素飞扬。另一方面，Web 应用程序在浏览器的上下文中运行，这让软件可以完成大部分（如果不是全部）渲染，从而减少转换的马力。但是 Web 一直在追赶，大多数浏览器供应商现在通过特定的 CSS 规则提供图形硬件加速。
Using -webkit-transform: translate3d(0,0,0);will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).
使用-webkit-transform: translate3d(0,0,0);将使 GPU 开始执行 CSS 转换，使它们更平滑（更高的 FPS）。
Note:translate3d(0,0,0)does nothing in terms of what you see. it moves the object by 0px in x, y and z axis. It's only a technique to force the hardware acceleration.
注意：translate3d(0,0,0)就你所看到的而言，什么都不做。它将对象在 x、y 和 z 轴上移动 0px。这只是一种强制硬件加速的技术。
An alternative is -webkit-transform: translateZ(0). And If there's flickering on Chrome and Safari due to transforms, try -webkit-backface-visibility: hiddenand -webkit-perspective: 1000. For more info refer to this article.
另一种选择是-webkit-transform: translateZ(0)。如果由于转换在 Chrome 和 Safari 上闪烁，请尝试-webkit-backface-visibility: hidden和-webkit-perspective: 1000。有关更多信息，请参阅本文。
回答by Mathew Kurian
I didn't see an answer here that explains this. Lots of transformations can be done by calculating each of the divand its options using a complicated set of validation. However, if you use a 3D function, each of the 2D elements you have are considered as 3D elements and we can perform a matrix transformationon these elements on the fly. However, most of the the elements are "technically" already hardware accelerated because they all use the GPU. But, the 3D transforms work directly on the cached versions of each of these 2D renders (or cached versions of the div) and directly use a matrix transformation on them (which are vectorized and parallelized FP math).
我在这里没有看到解释这一点的答案。通过div使用一组复杂的验证计算每个及其选项，可以完成许多转换。但是，如果您使用 3D 函数，则您拥有的每个 2D 元素都被视为 3D 元素，我们可以对这些元素即时执行矩阵变换。然而，大多数元素在“技术上”已经是硬件加速，因为它们都使用 GPU。但是，3D 变换直接在这些 2D 渲染（或 的缓存版本div）的缓存版本上工作，并直接对它们使用矩阵变换（矢量化和并行化 FP 数学）。
It is important to note that 3D transforms ONLY makes changes to features on a cached 2D div (in other words, the div is already a rendered image). So, things like changing the border width and color are no longer "3D" to be vaguely speaking. If you think about it, changing the border widths require you to rerender the divbecause and recache it so that the 3D transforms can be applied.
需要注意的是，3D 变换仅对缓存的 2D div 上的特征进行更改（换句话说，该 div 已经是渲染图像）。因此，诸如更改边框宽度和颜色之类的事情不再是模糊地说的“3D”。如果您考虑一下，更改边框宽度需要您重新渲染div因为并重新缓存它，以便可以应用 3D 变换。
Hope this makes sense and let me know if you have any more questions.
希望这是有道理的，如果您还有任何问题，请告诉我。
To answer your quesetion, translate3d: 0x 0y 0zwould do nothing since the transforms work directly on the texture that is formed by running the vertices of the divinto the GPU shader. This shader resource is now cached and a matrix will be applied when drawing onto the frame buffer. So, basically there is no benefit from doing that.
要回答您的问题，translate3d: 0x 0y 0z什么都不做，因为变换直接作用于通过将 的顶点运行div到 GPU 着色器而形成的纹理上。此着色器资源现在已缓存，并且在绘制到帧缓冲区时将应用矩阵。所以，基本上这样做没有任何好处。
This is how the browser works internally.
这就是浏览器内部的工作方式。
Step 1: Parse Input
第 1 步：解析输入
<div style = "position:absolute;left:0;right:0;bottom:0;top:0;"></div>
Step 2: Develop Composite Layer
第 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.
Step 3: Render Composite Layer
第 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);
}
回答by Serge Seletskyy
There's a bug with scrolling in MobileSafary (iOS 5) which leads to appearing artifacts as copies of input elements in the scrolling container.
MobileSafary (iOS 5) 中的滚动存在一个错误，这会导致在滚动容器中将工件显示为输入元素的副本。
Using translate3dfor each child element can fix that odd bug. Here's an example of CSS which saved the day for me.
对每个子元素使用translate3d可以修复这个奇怪的错误。这是一个 CSS 示例，它为我节省了一天。
.scrolling-container {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.scrolling-container .child-element {
position: relative;
-webkit-transform: translate3d(0,0,0);
}
回答by Prasanna Aarthi
Translate3D forces hardware acceleration.CSS animations, transforms and transitions are not automatically GPUaccelerated, and instead execute from the browser's slower software rendering engine.In order to use GPU we use translate3d
Translate3D 强制硬件加速。CSS 动画、变换和过渡不会自动GPU加速，而是从浏览器较慢的软件渲染引擎执行。为了使用 GPU，我们使用 translate3d
Currently, browsers like Chrome, FireFox, Safari, IE9+ and the latest version of Opera all come with hardware acceleration, they only use it when they have an indication that a DOM element would benefit from it.
目前，Chrome、FireFox、Safari、IE9+ 和最新版本的 Opera 等浏览器都带有硬件加速功能，它们仅在有迹象表明 DOM 元素将从中受益时才使用它。
回答by Jason Young
Be aware that it creates a stacking context (plus what the other answers said), so it doespotentially have an effect on what you see, e.g. making something appear over an overlay when it isn't supposed to.
请注意，它会创建一个堆叠上下文（加上其他答案所说的内容），因此它确实可能会对您所看到的内容产生影响，例如，在不应该出现的情况下，使某些内容出现在叠加层上。
