Question

91

css3 alternative for translate3d?

rated 0 times [ 94] [ 3] / answers: 1 / hits: 26103 / 13 Years ago, tue, november 15, 2011, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

madelyn

Add To Favorites

Follow

Total Points: 449

Total Questions: 100

Total Answers: 100

Location: Seychelles

Member since Fri, May 7, 2021

3 Years ago

madelyn questions

1 Select value doesnt change the first time I trigger onChange event when using setSate React

Tue, Jan 11, 22, 00:00, 2 Years ago

1 React Native performance slow

Wed, Jul 28, 21, 00:00, 3 Years ago

1 MUI Datatable custom toolbar

Wed, Jul 14, 21, 00:00, 3 Years ago

1 Multi row swiper not working in react from swiper.js

Sat, Nov 7, 20, 00:00, 4 Years ago

1 How to make step wizard form in ReactJs?

Thu, Sep 3, 20, 00:00, 4 Years ago

View All

answered 13 Years ago earllutherf · Accepted Answer

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.