Detecting 'transform: translate3d' support

Does anyone know how I would detect transform: translate3d(x,y,z) support is available?

My issue is that I want to use translate3d across browsers where it is supported because it tends to use hardware acceleration and hence smoother for animation, and then fall back to translate where its not.

Check out this solution.

It is based on the fact that if a browser supports transforms, the value of

window.getComputedStyle(el).getPropertyValue('transform')

will be a string containing the transformation matrix, when a 3d transform is applied to the element el. Otherwise, it will be undefined or the string 'none', as in the case of Opera 12.02.

It works on all major browsers.

The code:

function has3d() {
    if (!window.getComputedStyle) {
        return false;
    }

    var el = document.createElement('p'), 
        has3d,
        transforms = {
            'webkitTransform':'-webkit-transform',
            'OTransform':'-o-transform',
            'msTransform':'-ms-transform',
            'MozTransform':'-moz-transform',
            'transform':'transform'
        };

    // Add it to the body to get the computed style.
    document.body.insertBefore(el, null);

    for (var t in transforms) {
        if (el.style[t] !== undefined) {
            el.style[t] = "translate3d(1px,1px,1px)";
            has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
        }
    }

    document.body.removeChild(el);

    return (has3d !== undefined && has3d.length > 0 && has3d !== "none");
}

The original blog post announcing 3D transforms has an image flip demo, which does it with a media query, like this:

@media all and (-webkit-transform-3d) {
  /* Use the media query to determine if 3D transforms are supported */
  #flip-container {
    -webkit-perspective: 1000;
  }
  #flip-card {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;
  }
  #flip-container:hover #flip-card {
    -webkit-transform: rotateY(180deg);
  }
}

This blog post has a good intro to media queries. This has some more details.

You can try CCS3 @supports:

@supports (transform: translate3d) {
  div {
    transform : translate3d(20px,0,0);
  }
}

@supports not (transform: translate3d) {
  div {
    transform: translate(20px,0);
  }
}

Can I use @support

I'd suggest using Modernizr.

It does feature detection for a whole range of browser features, including 3D transforms. It also provides a method of specifying CSS rules for browsers which have various features or not, so it sounds like it will do exactly what you're looking for.

Hope that helps.