什么是-webkit-transform：translate3d（0,0,0）;准确吗？适用于身体？

问题描述

-webkit-transform：translate3d（0,0,0）; 究竟是什么？
它有任何性能问题吗？我应该把它应用到身体还是个别元素？它似乎改进滚动事件剧烈。

感谢您的参与！

解决方案

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

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

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）;准确吗？适用于身体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！