CSS3 - Перемещение элемента по экрану по шагам?

Question

Мне нужно перевести элемент по экрану с шагом 50 пикселей. Скажем, каждый клик, элемент перемещается на 50 пикселей вправо.

Как исправить следующий код?

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

Здесь он прыгает 50px каждый раз, а затем переводит 50px, в общей сложности 100px за клик. Мне нужно, чтобы движение было аппаратным ускорением (поскольку оно должно быть развернуто на мобильной платформе), и поэтому мне нужно будет использовать translate().

Answer 1

Просто закомментируйте последние две строки. Это то, что вызывает первоначальный 50px скачок:

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

Редактировать
Чтобы сделать его работу каждый раз, когда вы щелкаете, вы должны изменить translate3d свойства по отношению к текущей, а не .offset собственности, поскольку который больше не меняется после того, как вы прокомментируете приведенные выше строки.

Вот рабочий пример: http://jsfiddle.net/vujMV/16/