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