什么是-webkit-transform：translate3d（0,0,0）; 正好呢？ 适用于身体？

什么是-webkit-transform: translate3d(0,0,0); 正好呢？ 它是否有任何性能问题？ 我是否应该将其应用于身体或个人元素？ 这似乎大大改善了滚动事件。

感谢您的教训！

Answer 1

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

一个很好的阅读是在这里find

本地应用程序可以访问设备的graphics处理单元（GPU）使像素飞行。 另一方面，Web应用程序运行在浏览器的上下文中，这使软件可以执行大部分（如果不是全部）的渲染，从而导致转换的function减弱。 但是networking一直在追赶，大多数浏览器厂商现在都通过特定的CSS规则来提供graphics硬件加速。

使用-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

我没有在这里看到答案，这解释了这一点。 许多转换可以通过使用一组复杂的validation来计算每个div及其选项来完成。 但是，如果使用3Dfunction，则每个2D元素都被视为3D元素，我们可以在这些元素上进行matrix变换 。 但是，大多数元素在技术上已经硬件加速，因为它们都使用GPU。 但是，3D转换直接在这些二维渲染（或divcaching版本）的caching版本上工作，并直接在它们上使用matrix变换（vector化和并行化的FPmath）。

需要注意的是，3D变换只能对caching的2D div上的特征进行更改（换句话说，div已经是渲染的图像）。 所以，改变边框的宽度和颜色等不再是“3D”的含糊不清。 如果你仔细想想，改变边框宽度需要你重新渲染div因为这样可以应用3D变换。

希望这是有道理的，让我知道如果你有任何问题。

为了回答你的问题， translate3d: 0x 0y 0z将不会做任何事情，因为转换直接在通过运行div的顶点到GPU着色器形成的纹理上工作。 这个着色器资源现在被caching，当绘制到帧缓冲区时，matrix将被应用。 所以，基本上这样做没有任何好处。

这是浏览器如何在内部工作。

第1步：parsinginput

 <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

MobileSafary（iOS 5）中存在一个滚动错误，导致在滚动容器中出现input元素副本的工件。

对每个子元素使用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强制硬件加速 .CSSanimation，转换和转换不会自动进行GPU加速，而是从浏览器的较慢的软件渲染引擎执行。为了使用GPU，我们使用translate3d

目前，Chrome，FireFox，Safari，IE9 +以及Opera最新版本的浏览器都带有硬件加速function，只有当它们指示DOM元素可以从中受益时才会使用它。

Answer 5

请注意，它会创build一个堆栈上下文 （加上其他答案所说的内容），所以它可能会影响您所看到的内容，例如，在不应该出现的情况下，在覆盖层上显示某些内容。