translate3d의 css3 대체품?

Question

ipads와 같은 터치 지원 장치 용으로 만든 JS 스크립트를 마우스 제스처와 함께 사용할 수 있도록 변환하려고합니다.

이 스크립트는 translate3d를 사용합니다. (필자가 생각하기에) 웹킷 특정이지만 가능한 많은 브라우저에서이 작업을하고 싶습니다. 그렇다면 translate3d의 CSS3 대안은 무엇입니까? CSS3의

element.style.webkitTransform = 'translate3d(500px, 0, 0)'; 

내 지식은 매우 제한되어, 그래서 당신이 줄 수있는 예/설명은 많은 감사합니다 :

는 여기가 자바 스크립트에서 사용되고 방법입니다.

Answer 1

Translate3d는 CSS3이지만 대부분의 브라우저는 아직 구현하지 않았습니다 (Chrome/Safari가 Webkit을 통해 지원하는 유일한 주요 기능 임). 그것은 3 차원 변환 스타일입니다.

그래서, 또한 Z 축 잘라 2-D 변환이 있습니다

translate3d(X,Y,Z); // or translateX(X), translateY(Y), translateZ(Z); 

고맙게도, 2-D 변형이 거의 모든 주요 브라우저 (의해 지원되는

translate(X,Y); 

진다 IE9 이상) 브라우저 프리픽스가 필요합니다. 당신의 예에서,이 보일 것 같은 : http://www.w3.org/TR/css3-3d-transforms/

2-D의 한 가지 단점은 변환
http://www.w3.org/TR/css3-2d-transforms/
은 다음과 같습니다 조금 더 2-D에 3-D 참조 변환에 대한

/* CSS */  
selector { 
    transform: translate(500px, 0); 
    -o-transform: translate(500px, 0);   /* Opera */ 
    -ms-transform: translate(500px, 0);  /* IE 9 */ 
    -moz-transform: translate(500px, 0);  /* Firefox */ 
    -webkit-transform: translate(500px, 0); /* Safari and Chrome */ 
} 

/* JS */ 
element.style.transform = 'translate(500px, 0)'; 
element.style.OTransform = 'translate(500px, 0)';   // Opera 
element.style.msTransform = 'translate(500px, 0)';   // IE 9 
element.style.MozTransform = 'translate(500px, 0)';  // Firefox 
element.style.WebkitTransform = 'translate(500px, 0)';  // Safari and Chrome 

3-D 변환과 달리 GPU 가속이 아닙니다. 얼마나 많은 하드웨어 가속이 전환 및 애니메이션에 도움이되는지에 대한 좋은 정보는이 링크를 참조하십시오 : http://ariya.blogspot.com/2011/07/fluid-animation-with-accelerated.html.

더 크로스 브라우저의 선 (善)의 경우 올바른 브라우저가 적용 할 스타일을 변환 찾는 함수를 작성 (또는 변환을 지원하지 않는 브라우저 결정)과 같이 할 수 있습니다 : 당신은 또한 사용할 수 있습니다

var getTransformProperty = function(node) { 
    var properties = [ 
     'transform', 
     'WebkitTransform', 
     'msTransform', 
     'MozTransform', 
     'OTransform' 
    ]; 
    var p; 
    while (p = properties.shift()) { 
     if (typeof node.style[p] != 'undefined') { 
      return p; 
     } 
    } 
    return false; 
}; 

을 기능 검색 라이브러리는 Modernizr입니다.

Answer 2

2d transforms은 더 이상 widely supported이고 공급 업체 접두사가있는 것 같습니다. 여기에 W3C spec이 있습니다.

element.style.webkitTransform = 'translate(500px)'; 

Modernizr to check for support을 사용할 수 있습니다.