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

感谢您的参与！

解决方案

-webkit-transform：translate3d（0,0,0）; 使一些设备运行其硬件加速。

这里

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

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

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

---

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

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.

Thanks for the lesson!

解决方案

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

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.

Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher 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.

---

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屋！