CSS3 - переводить элемент по экрану пошагово?

Question

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

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

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

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

Answer 1

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

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

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

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