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/