CSS3 - 요소를 화면에서 단계별로 번역 하시겠습니까?

Question

화면에서 50px 정도의 단계로 요소를 변환해야합니다. 클릭 할 때마다 요소가 오른쪽으로 50 픽셀 이동하고 말합니다.

다음 코드를 어떻게 수정합니까?

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

는 여기가 50 픽셀마다 점프 후 50 픽셀, 클릭 당 100 픽셀의 총을 변환합니다. 나는 하드웨어 가속화가 필요하다. (모바일 플랫폼에 배치되기 때문에) translate()를 사용해야한다.

Answer 1

마지막 두 줄을 주석으로 처리하십시오. 사람들은 초기 50 픽셀 점프의 원인이 무엇인가 :

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

편집을 당신이 그것을 클릭 할 때마다 작동, 당신은 오히려 .offset 부동산 이후보다는 현재에 translate3d 속성 상대를 변경해야 만들려면
위 라인을 주석 처리하면 더 이상 변경되지 않습니다.

여기에 동작하는 예제입니다 : http://jsfiddle.net/vujMV/16/