css3 alternative for translate3d?

Question

I'm trying to convert a JS script that was made for touch enabled devices like ipads so it can be used with the mouse gestures.

The script uses translate3d, which (I think) is webkit specific, but I'd like to make this work in as many browsers as I can. So, what's the CSS3 alternative to translate3d?

Here's how it's being used in the JavaScript:

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

My knowledge of CSS3 is very limited, so any examples / explanations you can give are much appreciated.

Answer 1

Translate3d is CSS3, most browsers just haven't implemented it yet (Chrome/Safari are the only major ones to support it via Webkit). It is a 3-D transformation style.

There are also 2-D transformations which cut out the Z-axis, so:

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

becomes

translate(X,Y);

Thankfully, 2-D transforms are mostly supported by all major browsers (IE9 and up) but they require browser prefixes. In your example, this would look like:

/* 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

For a bit more on 2-D and 3-D transforms see:
http://www.w3.org/TR/css3-2d-transforms/
http://www.w3.org/TR/css3-3d-transforms/

The one downside to 2-D transforms is that, unlike 3-D transforms, they are not GPU accelerated. See this link for some great info on how much hardware acceleration helps transitions and animations: http://ariya.blogspot.com/2011/07/fluid-animation-with-accelerated.html.

For more cross-browser goodness, you can write a function to find the correct browser transform style to apply (or determine the browser does not support transforms) like so:

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;
};

You can also use a feature-detection library like Modernizr.

Answer 2

2d transforms seem to be more widely supported, with vendor prefixes. Here's the W3C spec.

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

You could use Modernizr to check for support.