Skip to content

Instantly share code, notes, and snippets.

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 :[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); = 'test3d';
ret = div.offsetHeight === 3;
return ret;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment