Question

我正在使用Isotope（isotope.metafizzy.co）和砌体水平布局。例： http://codepen.io/desandro/pen/oCiAD

它工作正常，但我很好奇为什么库设置左/右和上/下属性而不是使用变换。这是我的理解，使用3D，如

transform: translateZ(0);

或

transform: translate3d(0,0,0);

会将元素强制放到另一个图层上，从而触发GPU渲染并获得更好的性能。我意识到这可能是故意做的，但我不清楚为什么。

浏览器是否已改进，是否已不再需要？如果没有，有没有办法在Isotope中启用3d变换？

提前致谢。

Answer 1

我认为其中一个原因可能是Webkit将3d变换后的元素视为纹理而不是矢量，以便提供硬件3d加速，这可能会导致文本模糊或消除锯齿问题。

示例：

-webkit-transform: translate3d(0px, 100px, 0px);