CSS性能相對於translateZ（0）

許多博客表示，通過使用transform: translateZ(0)來加速動畫和轉場，「欺騙」GPU可以認爲某個元素是3D。我不知道什麼影響，如果有的話，施加此變換以下面的方式：CSS性能相對於translateZ（0）

* { 
    -webkit-transform: translateZ(0); 
    -moz-transform: translateZ(0); 
    -ms-transform: translateZ(0); 
    -o-transform: translateZ(0); 
    transform: translateZ(0); 
}

來源

2012-05-30 Ahmed Nuaman

你能鏈接到這些博客文章？ – Michelle

@PineappleUndertheSea this one：http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css在這裏寄給我。 – 2014-03-13 21:39:14

順便說一句，'-o-transform：translateZ（0）'從來就不是一件事。 http://caniuse.com/#search=translate3d –

CSS變換創建一個新的堆疊內容和包含塊，如在the spec.在簡單的英語描述的，這意味着，固定將變換應用於它們的位置元素將更像絕對定位的元素，並且值可能會受到影響。

如果你看看this demo，你會明白我的意思。第二個div應用了轉換，這意味着它會創建一個新的堆疊上下文，並且僞元素堆疊在頂部而不是下面。

所以基本上，不要這樣做。僅在需要優化時才應用3D變換。 -webkit-font-smoothing: antialiased;是另一種在不產生這些問題的情況下使用3D加速的方式，但它只能在Safari中使用。

來源

2012-05-30 10:26:37

如果需要暗示，in some scenarios Google Chrome performance is horrible with hardware acceleration enabled。奇怪的是，改變「詭計」至-webkit-transform: rotateZ(360deg);工作得很好。

我不相信我們曾經弄明白爲什麼。

來源

2012-05-30 10:51:42

我在Safari 5和6中使用了最大高度的壓縮圖像和可怕的錯誤動畫問題。當我禁用GPU加速（translateZ（0））時，一切按預期工作，但動畫不是'不夠流暢。我將translateZ（0）改爲rotateZ（360deg），突然間動畫變得流暢，硬件加速，沒有任何問題了。 –

在移動設備上將所有內容發送到GPU都會導致內存過載並導致應用程序崩潰。我在Cordova的iPad應用程序中遇到過這個問題。最好只將所需的項目發送給GPU，即專門移動的div。

更好的是，使用3d 轉換轉換來執行動畫，如translateX（50px），而不是left：50px;

來源

2013-09-10 20:51:21 Perry

您的意思是「使用3d轉換」而不是「使用3d轉換」？ – Isius

我可以證明-webkit-transform: translate3d(0, 0, 0);會混淆新的position: -webkit-sticky;屬性。當我正在處理左側抽屜導航模式時，我想要使用transform屬性的硬件加速與我的頂級導航欄的固定位置有關。我關閉了轉換，定位工作正常。

幸運的是，我似乎已經有了硬件加速，因爲我在html元素上有-webkit-font-smoothing: antialiased。我在iOS7和Android中測試了這種行爲。

來源

2014-05-09 14:32:15

它強制瀏覽器使用硬件加速來訪問設備的圖形處理單元（GPU）以使像素飛起來。另一方面，Web應用程序運行在瀏覽器的上下文中，這使得軟件可以執行大部分（如果不是全部）渲染，從而導致轉換的功率減少。但是網絡一直在追趕，大多數瀏覽器廠商現在都通過特定的CSS規則來提供圖形硬件加速。

使用-webkit-transform：translate3d（0,0,0）;將啓動GPU進行CSS轉換，使其更平滑（更高的FPS）。

注意： translate3d（0,0,0）根據所看到的內容不做任何事情。它將對象在x，y和z軸上移動0px。這只是一種強制硬件加速的技術。

好讀在這裏：http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

來源

2014-09-18 21:01:33 Neo

CSS性能相對於translateZ（0）

回答

相關問題