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支持它的主要版本).它是一种三维转型.

还有二维变换切出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

有关二维和三维变换的更多信息,请参阅:
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这样的功能检测库.