CSS3 - 逐步在屏幕上翻译元素？

【问题标题】：CSS3 - Translating an element across the screen in steps?CSS3 - 逐步在屏幕上翻译元素？
【发布时间】：2012-01-16 02:21:09
【问题描述】：

我需要以 50 像素的步长在屏幕上平移一个元素。每次点击时，元素都会向右移动 50 像素。

如何更正以下代码？

这里每次跳转50px，然后平移50px，每次点击一共100px。我需要对运动进行硬件加速（因为它要部署在移动平台上），因此我需要使用 translate()。

【问题讨论】：

【解决方案1】：

只需注释掉最后两行。这些是导致初始 50px 跳跃的原因：

//left += 50;
//move.style.left = left+"px";

编辑
要使其在您每次单击时都能正常工作，您需要更改相对于当前属性的 translate3d 属性，而不是 .offset 属性，因为一旦您注释掉以上行，它就不再更改。

【讨论】：