Detecting 'Transform: Translate3D' Support

How to detect CSS translate3d without the webkit context?

I needed something similar. I wanted to test if a browser supported translate3d without using a library. I didn't find any good generic test that wasn't webkit specific. So after much experimentation, I came up with the following test. I first create a test element, assign a transform function to it, then see if the element retained the transform function.

function Has3DSupport()
{
    var sTranslate3D = "translate3d(0px, 0px, 0px)";

    var eTemp = document.createElement("div");

    eTemp.style.cssText = "  -moz-transform:"    + sTranslate3D +
                          "; -ms-transform:"     + sTranslate3D +
                          "; -o-transform:"      + sTranslate3D +
                          "; -webkit-transform:" + sTranslate3D +
                          "; transform:"         + sTranslate3D;
    var rxTranslate = /translate3d\(0px, 0px, 0px\)/g;
    var asSupport = eTemp.style.cssText.match(rxTranslate);
    var bHasSupport = (asSupport !== null && asSupport.length == 1);

    return bHasSupport;
} // Has3DSupport

The function is plenty fast for my needs: < 50 microseconds in desktop browsers, < 500 microseconds in mobile browsers.

Hope this helps.

css, translate() vs translate3d() support

you can use -ms-transform that only apply to IE9 and transform for the other browsers

-ms-transform: translate(50%, 50%); /* IE9 support*/
transform: translate3d(50%, 50%, 0); /*  IE10+ and other browser*/

IE9 will ignore the transform and use the -ms-transform

CSS @keyframes translate3d Compatibility

@supports query works just fine. It has to be at top level of the code. You also need to provide some dummy values for the translate3d.

@supports(transform: translate3d(100px,100px,10px)){   
  div{
    background: blue;
  }
}

@supports not (transform: translate3d(100px,100px,10px)){   
  div{
    background: red;
  }
}

div{
  width: 250px;
  height: 250px;
)

<div></div>

CSS3 card flip animation, detect if not supported

You should use something Modernizr to detect if the user's browser supports everything you need to do the card flip. It is created for just that purpose and does the job far more efficiently than when you would have to find and maintain your own solution. As browsers evolve, modernizr will as well and you won't have to worry about wether your feature detection will break

---

Related Topics