Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript function to detect 3D CSS transform support
function supports3d() {
// borrowed from modernizr
var div = document.createElement('div'),
ret = false,
properties = ['perspectiveProperty', 'WebkitPerspective'];
for (var i = properties.length - 1; i >= 0; i--){
ret = ret ? ret : div.style[properties[i]] != undefined;
};
// webkit has 3d transforms disabled for chrome, though
// it works fine in safari on leopard and snow leopard
// as a result, it 'recognizes' the syntax and throws a false positive
// thus we must do a more thorough check:
if (ret){
var st = document.createElement('style');
// webkit allows this media query to succeed only if the feature is enabled.
// "@media (transform-3d),(-o-transform-3d),(-moz-transform-3d),(-ms-transform-3d),(-webkit-transform-3d),(modernizr){#modernizr{height:3px}}"
st.textContent = '@media (-webkit-transform-3d){#test3d{height:3px}}';
document.getElementsByTagName('head')[0].appendChild(st);
div.id = 'test3d';
document.body.appendChild(div);
ret = div.offsetHeight === 3;
st.parentNode.removeChild(st);
div.parentNode.removeChild(div);
}
return ret;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment