Does Firefox 4 support 3d Transformations?

Question

I can't seem to find this anywhere on the web, but I am just wondering if Firefox 4 is going to support 3-d Transformations like the current webkit browsers do.

Answer 1

A really good article on this Subject is available here:
http://24ways.org/2010/intro-to-css-3d-transforms

Basically for the transform property you will get functions such as:

• translate3d(tx,ty,tz)
• perspective( num );
• rotate3d(rx,ry,rz,angle)

As of Jan 2nd 2011: The 3D CSS transforms are still not fully supported by Chrome, Firefox or IE, Or even Safari for Windows - it's working on my XP machine, but not my Win7 machine. (I've mainly tested only tested on windows)

It sounds like Webkit/Apple is the main source of these suggestions:

• http://webkit.org/blog/386/3d-transforms/
• W3C Draft Spec: http://www.w3.org/TR/css3-3d-transforms/

These are slightly different than what is currently available for some browsers (I believe firefox, chrome and safari), which is the 2d transforms:

• http://www.w3.org/TR/css3-2d-transforms/

Here are some of the functions provided to the transform property by this spec:

• skew, rotate, scale

This can be used for good 3D effects:

• http://ajaxian.com/archives/3d-cube-using-new-css-transformations
• http://hacks.mozilla.org/2009/06/3d-transforms-isocube/
• http://www.zachstronaut.com/projects/rotate3di/

DEMOS/EXAMPLES/TESTS - of CSS3 3D transforms:

• http://webkit.org/blog/386/3d-transforms/
• http://www.satine.org/archives/2009/07/11/snow-stack-is-here/
• http://richardleggett.co.uk/blog/index.php/2010/05/03/jquery_css3_3d_animation

So the "-moz-transform" Mozilla extension will likely support the 3d transforms in the future, but as of Jan 2nd 2011 only supports the CSS3 2D transforms:

• https://developer.mozilla.org/en/CSS/-moz-transform