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来检查支持 。