許多博客都表示，通過“ transform: translateZ(0)加速” GPU來提高動畫和過渡的速度，可以認為元素是3D，從而提高了性能。我想知道以下列方式使用此轉換是否有影響：* { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0);}
3 回答
LEATH
TA貢獻1936條經驗 獲得超7個贊
CSS轉換會創建一個新的堆棧上下文并包含該塊，如規范中所述。用通俗易懂的英語來說，這意味著對固定位置的元素應用了轉換后，它們的行為將更像絕對定位的元素，并且z-index值很容易被擰緊。
如果您看一下這個演示，您將明白我的意思。第二個div應用了轉換，這意味著它創建了一個新的堆疊上下文，并且偽元素堆疊在頂部而不是下面。
所以基本上，不要那樣做。僅在需要優化時才應用3D變換。-webkit-font-smoothing: antialiased;是利用3D加速而不產生這些問題的另一種方法，但它僅在Safari中有效。
GCT1015
TA貢獻1827條經驗 獲得超4個贊
如果您希望獲得啟示，在某些情況下啟用了硬件加速功能，Google Chrome的性能將非常糟糕。奇怪的是，將“技巧”更改為-webkit-transform: rotateZ(360deg);正常就可以了。
我不相信我們曾經想出原因。
添加回答
舉報
0/150
提交
取消