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

Question

我需要在屏幕上以50px为单位翻译一个元素。可以说，每次点击后，元素都会向右移动50px。

如何更正以下代码？

http://jsfiddle.net/vujMV/13/

这跳跃50px的每一次再转换50像素，共100像素的每次点击。我需要硬件加速（因为它将被部署在移动平台上），因此我需要使用translate（）。

Answer 1

只是最后两行注释掉了。这些是什么导致初始50px的跳跃：

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

编辑
为了让你点击它每一次工作，你需要translate3d财产相对于改变当前的一个，而不是因为.offset财产一旦你注释掉上面的内容，这一点就不再改变了。

这里有一个工作示例：http://jsfiddle.net/vujMV/16/