什么是-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）; 究竟做了什么？
它有任何性能问题吗？我应该把它应用到身体还是个别元素？它似乎改进滚动事件剧烈。

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）; 使一些设备运行其硬件加速。

-webkit-transform: translate3d(0,0,0); makes some devices run their hardware acceleration.

此处

本机应用程序可以访问设备的图形处理单元
（GPU）以使像素飞行。另一方面，Web应用程序在浏览器的上下文中运行
，这使得软件可以做最多的渲染（如果不是
），从而减少了转换的马力。
但是Web已经赶上了，大多数浏览器供应商现在通过特定的CSS规则提供
图形硬件加速。

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.

使用 -webkit-transform：translate3d（0,0,0）; 会使GPU转换为CSS转换的动作，使它们更平滑）。

Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).

注意： translate3d（0,0,0）你看到的术语。它在x，y和z轴上将对象移动0px。

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.

另一种方法是 -webkit-transform： translateZ（0）。如果Chrome和Safari由于转换而闪烁，请尝试 -webkit-backface-visibility：hidden 和 -webkit-perspective：1000 。有关详情，请参阅本文。

An alternative is -webkit-transform: translateZ(0). And If there's flickering on Chrome and Safari due to transforms, try -webkit-backface-visibility: hidden and -webkit-perspective: 1000. For more info refer to this article.

这篇关于什么是-webkit-transform：translate3d（0,0,0）;准确吗？适用于身体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！