translate3dの代わりにcss3を使用しますか？

Question

ipadsのようなタッチ対応デバイス用に作られたJSスクリプトをマウスジェスチャーで使用できるように変換しようとしています。

スクリプトはtranslate3dを使用していますが、これはWebkit固有のものですが、できる限り多くのブラウザで動作させたいと思います。では、translate3dのCSS3の代替案は何ですか？ここで

は、JavaScriptで使われている方法は次のとおりですCSS3の

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

私の知識は非常に限られているので、あなたが与えることができる任意の例/説明がはるかに高く評価されています。

Answer 1

Translate3dはCSS3で、ほとんどのブラウザはまだ実装されていません（Chrome/SafariはWebkit経由でサポートする唯一の主要なものです）。これは3-D変換スタイルです。

ので、また、Z軸を切り出し2-D変換があります

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

はありがたいことに、2-D変換は、ほとんどすべての主要なブラウザ（でサポートされている

translate(X,Y); 

なりますIE9以上）、ブラウザのプレフィックスが必要です。あなたの例では、これは次のようになります。ビットについて

/* 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 

より上の2-Dおよび3-D参照変換：
http://www.w3.org/TR/css3-2d-transforms/
http://www.w3.org/TR/css3-3d-transforms/

1つの欠点2-Dは、にされて変換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を使用できます。