Skip to content

Instantly share code, notes, and snippets.

@lorenzopolidori
Forked from webinista/has3d.js
Last active December 4, 2020 10:52
Show Gist options
  • Save lorenzopolidori/3794226 to your computer and use it in GitHub Desktop.
Save lorenzopolidori/3794226 to your computer and use it in GitHub Desktop.
Testing for CSS 3D Transforms Support
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");
}
@jerone
Copy link

jerone commented Sep 27, 2012

The last lines can be wrapped to return (has3d !== undefined && has3d.length > 0 && has3d !== "none");

@lorenzopolidori
Copy link
Author

Good point, thanks. I changed it.

@jgonera
Copy link

jgonera commented Mar 27, 2013

I had problems with elements with position: fixed becoming invisible on Android Browser after running this function. I worked around it by sandboxing el inside an iframe: https://gist.github.com/jgonera/5250507

@scottlet
Copy link

For performance I'd go with something like:

var has3d = (function(){
    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 (transforms.hasOwnProperty(t)) {
        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");
}());

Just so the above function only runs the once per page instead of whenever you need to detect if we have 3d...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment