CSS3 Translate3D和iPhone硬件加速

Question

網絡上有幾個references關於使用CSS3 translate3d指令在某些移動設備（iPhone等）上強制進行硬件加速。然而，雖然其中大部分都詳細介紹了translate3d，但我沒有發現解釋如何使用它。因此，如果我已經正確實施它，我會發現自己徘徊不前，因爲我的動畫仍然有點困難。我的問題是：

1：你是否將它應用於元素（它是動態創建的），你將要進行動畫處理（幻燈片等）還是僅將它全局應用於body元素？

2：是更好的樣式規則適用於編程時被動態創建的元素，或者是它最好創建一個CSS規則（例如類）的元素，並應用該規則的元素（有沒有某種形式的預編譯發生或性能增益？）

3：是否有任何其他技巧可以利用以獲得流暢的用戶體驗？無論是快速勝出還是令人費解的解決方法？

感謝

Answer 1

1）老實說，我不知道：P我會去將過渡到僅元素。

2）更改類而不是應用樣式規則會更快。 來源：http://www.quirksmode.org/dom/classchange.html 此外，你保持風格和行爲分開。 Desktop Opera的最新版本也像其他瀏覽器一樣運行。我不知道移動瀏覽器。

3）技術優化檢查yslow和 firefox插件。這裏有大多數建議的彙編：http://developer.yahoo.com/performance/rules.html

Answer 2

-webkit-transform：translate3d（0，0，0）;

如果您將此css屬性應用於任何元素，它將強制設備使用硬件加速。我已經將它應用於解決Ipad2上的渲染問題，比如「空白間隙」

我有說應用這個設備真的很重，所以，你可以讓你的應用崩潰。 我的建議;使用這個技巧，如果你將它應用於少數元素。

http://davidwalsh.name/translate3d