css3替代translate3d？

Question

我試圖轉換一個JS腳本，它是爲支持觸摸的設備製作的，比如ipad，因此可以使用鼠標手勢。

該腳本使用translate3d，它（我認爲）是特定於webkit的，但我想盡可能在​​很多瀏覽器中使用這個工具。那麼，translate3d的CSS3選擇是什麼？

這裏是它是如何在JavaScript中使用：

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

我CSS3的知識是非常有限的，所以任何實例/解釋，你可以給我們非常感激。

Answer 1

Translate3d是CSS3，大多數瀏覽器尚未實現它（Chrome/Safari是唯一通過Webkit支持它的主要瀏覽器）。這是一種3D轉換風格。

也有2-d的轉換，其切出的Z軸，所以：

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

變得

translate(X,Y); 

幸運的是，2-d的變換主要是由所有主要瀏覽器（負載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/

的一個缺點2-d轉換爲與3D轉換不同，它們不是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。