I'm coding a slide in drawer menu using HTML5, CSS3, jQuery, and Modernizr (for feature detection).
I'm targeting the latest 5 browsers plus IE8 and up, and am using transform: translateX(x)
(not supported by IE8) for the drawer animation (slides in from left off-screen.)
I'd like to use Modernizr to detect whether transform: translateX(x)
is available but am not sure if transform: translateX(x)
is a '2D Transform' or a '3D Transform'.
Question is: which Modernizr CSS class (set in the page <body>
tag) should be used?
The Modernizr CSS choices are:
csstransforms
or csstransforms3d
translateX()
is a 2D transform. MDN does not explicitly state this anywhere, while the now-defunct WebPlatform.org says:and in the css-transforms spec, it's listed under ยง15.1 2D Transform Functions.