javascript - translate3d 的 css3 替代品？

Question

我正在尝试转换为 ipad 等支持触摸的设备制作的 JS 脚本，以便它可以与鼠标手势一起使用。

该脚本使用 translate3d，(我认为)它是特定于 webkit 的，但我想让它在尽可能多的浏览器中工作。那么，translate3d 的 CSS3 替代品是什么？

这是它在 JavaScript 中的使用方式:

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

我对 CSS3 的了解非常有限，因此非常感谢您提供任何示例/解释。

Answer 1

Translate3d 是 CSS3，大多数浏览器还没有实现它(Chrome/Safari 是唯一通过 Webkit 支持它的主要浏览器)。它是一种 3-D 转换样式。

还有切出 Z 轴的二维变换，所以:

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

成为

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/

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 .