当我为变换和左/顶属性设置动画时，我发现了一些奇怪的（？）行为。我使用jQuery +一些帮助程序来处理转换（它只是添加了供应商前缀并做了一些修复，不应该是我正在谈论的问题的原因）。因此，jquery工作得很好并且运行良好。当您单独设置变换比例和左/顶部动画时 - 它也可以正常工作，但是当您同时进行此操作时不会。
以下是我的演示示例：http://noname.vrn.ru/transform/test.html
正如您在动画中看到的那样，两个属性都会更改但位置属性不会对屏幕产生影响 - http://vns.ru/screenshots/transform-20110806-140111.png。接下来，当动画完成时，您可以更改窗口大小，并且块将保持在动画期间应该保持的新位置。因此，这意味着在调整大小后会发生'重绘'过程并且元素会改变它的位置。但每次动画步骤都会发生重绘过程，那么，为什么'left'属性的新值不适用？
我第一次在Chrome 12中看到过这个问题。我也在Safari 5.0.x中测试过并且没有问题，然后他们发布了5.1版本，在新版本中我们可以看到与Chrome相同的问题。在FF4-5中，它可以正常工作。
有人能解释一下Webkit浏览器的这种行为吗？
答案 0 :(得分：9)
您需要在图层上触发硬件加速：
#block {
-webkit-transform-style: preserve-3d;
}