Question

I am trying to detect if a browser supports 3d css transform or not .
I have looked into every single solution provided on the net but none of them worked for me
I then tried using the @support css property for my job . It worked flawlessly in chrome & firefox in Linux , but not in windows .

May be this is because i tested using chrome 23 in both OS , and according to the compatibility table in https://developer.mozilla.org/en-US/docs/CSS/@supports#Browser_compatibility only chrome 24 has support for @support rule.

Any ideas whether this method is suitable for checking support for 3d ?
I am concerned only about chrome 23.x and above and firefox 18 and above and not any other browser ,

        @supports(-webkit-transform: perspective( 1px ) )or
                 (-moz-transform: perspective( 1px) ) or
                 (-o-transform: perspective( 1px) ) or
                 (transform: perspective( 1px) ){

              #supports {
                  display:block;
              }

            }

Answer 1

You can use Modernizr:

if (Modernizr.csstransforms3d) {
  // CSS 3D Transforms supported
} else {
  // not supported
}