detect css 3d transform

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;
              }

            }

Have you tried modernizr.com ?

Johan
– Johan

2012-11-29 09:05:10 +00:00
Commented Nov 29, 2012 at 9:05 — Johan
– Johan, Commented Nov 29, 2012 at 9:05

Simone · Accepted Answer · 2012-11-29 09:10:30Z

5

You can use Modernizr:

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

answered Nov 29, 2012 at 9:10

Simone

21.6k15 gold badges84 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

adi rohan Over a year ago

That just did the trick , thanks a lot. I can't even vote you up :(

Michael Over a year ago

This is no longer a valid answer with the current version of Modernizr

obs Over a year ago

As @Michael wrote, this doesn't work any longer. Modernizr addes a class with the feature to the html element. In js I just check if this class is present.

Collectives™ on Stack Overflow

detect css 3d transform

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related