CSS3的translate3d替代品？

Question

我正在嘗試轉換為ipad等支持觸摸的設備制作的JS腳本，以便可以與鼠標手勢一起使用。

該腳本使用translate3d（我認為）是特定於Webkit的，但是我希望在盡可能多的瀏覽器中實現此功能。 那么，translate3d的CSS3替代品是什么？

這是在JavaScript中的用法：

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

我對CSS3的了解非常有限，因此非常感謝您提供的任何示例/說明。

Answer 1

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

也有切割出Z軸的2D轉換，因此：

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

變成

translate(X,Y);

值得慶幸的是，所有主要瀏覽器（IE9及更高版本）都主要支持2-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

有關2-D和3-D轉換的更多信息，請參見：
http://www.w3.org/TR/css3-2d-transforms/
http://www.w3.org/TR/css3-3d-transforms/

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轉換似乎更受支持 ，並帶有供應商前綴。 這是W3C規范 。

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

您可以使用Modernizr來檢查支持 。