CSS 3D transformations in Firefox Nightly

When the first 3D transformations in CSS got support on Webkit browsers people got incredibly excited about them. Now that they have matured we also support 3D CSS in Firefox. To see it for yourself, check out one of the latest nightly builds.

You can see them in action in this demo of a rotating HTML5 logo and the screencast below:

This means now that we need your support in trying out CSS 3D examples in Firefox and add other extensions than -webkit- to your CSS 3D products and demos. To show that this is possible, we took the well-known webkit-only “poster circle” demo and made it work with Firefox nightly by adding the -moz- (and of course the other prefixes and one set of instructions without browser prefixes). Here is a slight excerpt:

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;

You can see this in action in the screencast below alongside Chrome and you try the demo out yourself. The slight jerkiness is actually my MacBook Air impersonating a starting jet every time I use ScreenFlow and not the browser.

To celebrate the release and to show how CSS 3D can be applied as subtle effect, have a game of pairs using your favourite browsers (and a cat) :

browser pairs

Oleg Romashin also spent some time to convert a few CSS 3D demos to work with Mozilla and you can check the 3D city for more “wow”.

If you are new to CSS 3D transformations here’s a good beginner course and a tool to create them.

The rotating HTML5 logo demo also shows how you can check if the currently used browser supports 3D transforms. Instead of repeating the animation frames for all the prefixes we test in JavaScript and create the CSS on the fly:

function checksupport() {
  var props = ['perspectiveProperty', 'WebkitPerspective',
               'MozPerspective', 'OPerspective', 'msPerspective'],
      i = 0,
      support = false;
  while (props[i]) {
    if (props[i] in form.style) {
      support = true;
      pfx = props[i].replace('Perspective','');
      pfx = pfx.toLowerCase();
  return support;
if (checksupport()) {
  var s = '';
  styles = document.createElement('style');
  s += '#stage{-'+ pfx +'-perspective: 300px;}'+
       '#logo{-'+ pfx +'-transform-style: preserve-3d;position:relative;}'+
       '#logo.spin{-'+ pfx +'-animation: spin 3s infinite linear;}'+
       '@-'+ pfx +'-keyframes spin {'+
       '0% {'+
       '-'+ pfx +'-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);'+
       '100% {'+
       '-'+ pfx +'-transform: rotateX(0deg) rotateY(360deg)'+
       ' rotateZ(360deg);'+
  styles.innerHTML = s;

For more information on creating your own pages that use 3D transformations, take a look at the draft specification

As always, If you find any bugs, please report them at bugzilla.mozilla.org!

So please reward our hard work bringing the third dimension to Firefox’s CSS engine by supporting and testing. Cheers!

About Chris Heilmann

Principal Evangelist at Mozilla for HTML5 and open web. Let's fix this!

More articles by Chris Heilmann…


  1. loffini

    dont work for ff 7.0.1 OSx

    October 26th, 2011 at 13:27
    1. Chris Heilmann

      Yes, that is cause 7 is not a nightly…

      October 26th, 2011 at 13:29
    2. paulo333

      You should read the four first lines, maybe…

      October 26th, 2011 at 14:50
  2. Zéfling

    Mmmm, this demo not work yet :

    October 26th, 2011 at 13:57
  3. Jesse Ruderman

    Where can I download NyanBrowser?

    October 26th, 2011 at 14:03
  4. Karl Böhlmark

    This is great news!
    I see that backface-visibility also works => lets get flipping!

    October 26th, 2011 at 14:45
  5. Beben Koben

    where’s the rotated!!!
    what’s wrong

    October 26th, 2011 at 15:10
  6. Richard

    When WebKit support was announced, I made this:


    It usesa WebM video, so only works in Chrome IIRC.

    October 26th, 2011 at 15:38
    1. Omega X

      WebM has been supported in Firefox since 4.0.

      November 1st, 2011 at 16:50
  7. AdamT

    Good good you people are stupid. Read the article, you illiterates.

    October 27th, 2011 at 01:00
    1. woodsy

      Inevitably Muphry’s law bites you in the a$$!

      October 27th, 2011 at 03:44
  8. Jonathan

    Great. Although the poster circle demo is nowhere near as smooth as the other demos on my system (it’s not a Macbook Air either), it’s actually pretty jerky.

    October 27th, 2011 at 02:04
  9. Matt

    The poster circle demo is also jerky on my system, while it runs super smooth on Chromium. Any chance someone can point us to the appropriate bug on bugzilla?

    Beyond that, nice work! : )

    October 27th, 2011 at 03:38
  10. mekal

    two examples that I made a slide show and a book for the book there is a very small bug ZIndex the back and returns to its position in a split second



    deux exemples que j’ai fait un diaporama et un livre pour le livre il y a un tres petit bug le zindex remonte et revient a sa position en une fraction de seconde

    October 27th, 2011 at 03:46
  11. Gerben

    I think ‘perspectiveProperty’ should just be ‘perspective’.
    Also the replace should be ‘.replace(/Perspective/i,”);’ to account for the none-prefixed version not having an uppercase ‘p’.

    This way the code will still work if browsers drop the prefix.

    October 27th, 2011 at 09:12
  12. Ken Saunders

    Wow, and wow again. Really great work y’all!
    Love the browser memory game.

    I have a very modest system, and all of the demos work just fine, including the poster circle. It isn’t jerky at all.
    It would be cool, and quite trippy to mix the poster circle demo with the browser memory game.

    October 27th, 2011 at 12:51
  13. Paul Irish

    In a lot of cases in webkit, the above feature detect will provide a false positive. Since about two-three years ago, all webkit ports parse and understand `perspective` as a property, however the actual implementation of 3D transforms is up to the port.

    Modernizr uses a custom media query that is exposed in Webkit (and was considered for Gecko):

        @media (transform-3d), (-o-transform-3d), (-moz-transform-3d), (-ms-transform-3d), (-webkit-transform-3d){
             /* ... */

    To avoid misidentifying browsers, I’d recommend augmenting the script above… or just use a custom build of Modernizr. :)

    October 29th, 2011 at 21:40
  14. shirokoff

    It doesn’t seem to work in Aurora 9.0a2 =(

    November 1st, 2011 at 01:12
    1. Matt Woodrow

      You need a nightly version (10!) for this to work, until it is merged to Aurora (next week).

      November 1st, 2011 at 22:44
    2. Mark

      Aurora != nightly
      (Aurora is not equal to nightly)

      November 2nd, 2011 at 08:54
  15. Michael

    Hi Chris,

    I tried using this feature (was enabled only for -webkit-* otherwise it’d make rorateY’ed images a bit odd) but apparently the preserve-3d transform style simply makes the image “disappear”… Example here, simply compare with Chrome:


    The CSS is at http://www.pcx360.com/css/generic/games.css (line 24/25)
    There is also a -moz-perspective : 1000px (same with -webkit) on the body, in another .css.

    Any idea what could be the issue?

    November 11th, 2011 at 20:06
    1. nemo


      For people who are interested in his report – looks like the spec isn’t totally mature ;)

      November 16th, 2011 at 12:36
  16. Konrad Perko

    Wow, I win “browser memo” in 6 moves (with Firebug help ;)

    November 16th, 2011 at 09:41
    1. nemo

      I can win in 0 moves w/ firebug ;)

      November 16th, 2011 at 12:36
  17. Vinci

    I have a 3d demo work fine in webkit browsers…and I added moz prefix for aurora:


    when I try it on aurora 10a2, most of the demo work except the core part – perspective doesn’t work either dynamic (transition) or static way :(

    November 17th, 2011 at 10:56
  18. Michael

    @Vinci: seems to be a problem with your overflow: hidden (not saying that the issue is on your side, but without it the perspective seems ok)

    November 19th, 2011 at 04:07
    1. Vinci

      Hi Michael,

      Thank you. I removed the perspective but the effect is still not correct :X

      (Check the demo with webkit you will see the different)

      November 20th, 2011 at 00:39
  19. nemo

    Hey Vinci. I don’t know too much about this, but according to moz dudes, the 3d CSS spec is kind of vague on something or other (paint order?) and this does impact the perspective on one demo I saw. According to them, it can vary even on different webkits (OS/card or somesuch). Dunno. Maybe one of them can weigh in, perhaps if you filed a bug.

    November 20th, 2011 at 15:27
  20. SToto98

    Hi Chris,
    I’ve adapted this CSS/JS script http://tympanus.net/Development/Slicebox/index5.html to support -moz- prefix.

    I’ve try it with the latest nightly (11.0a1) and … it works but the result is far from what webkit render…
    It’s just ugly. It has artefacts everywhere. Where is the best place to post the result ? bugzilla.mozilla.org ?

    November 21st, 2011 at 12:34
  21. is-real

    I’ve just updated a CSS 3D experiment I did a while ago, and now it works with Firefox nightly too.


    December 14th, 2011 at 19:09
  22. Samuel

    I have tweaked the 3d also a bit and created polygon here, though its sluggish in Mozilla. It works perfect in Chrome.
    Check this out


    December 30th, 2011 at 14:09
  23. Joel

    Check THIS out in Chrome/Safari:


    THIS is the future. But it should be NOW.

    Firefox needs to hustle and make this happen already as many businesses and social/learning sites fall behind when major market share browsers are stuck 2 years in the past.

    As a developer, i am really let down by the browser that I have supported for many years. I am disheartened to see the lack of innovation and foresight and, to be blunt, arrogance on the part of the team regarding delivering ‘webkit’ like 3D rendering.

    Look, these browsers are free and provide an immeasurable service to all of us so I feel dirty having to post even one criticism of Firefox. But if you are going to assume the responsibility, do it properly.

    Stop holding us back. Stop holding yourself back. Get this up and running in 2012 – find a way.

    January 11th, 2012 at 21:38
    1. Forkoff

      @Joel… what are you talking about that looks perfect in Firefox.

      Very impressive actually. Mind = Blown.

      If you want to talk about browsers holding us back, why no mention of the one browser (of the 5 popular ones) that does not suppord CSS3 properly, never mind 3D CSS… you know, that same browser that has been holding the web back for almost 10 years now. That same browser that STILL comes pre-installed on more than 70% of computers…

      Microsoft… Time to wake up, dump IE, pre install Firefox, Chrome, Opera or Safari and just let people who know what they are doing deal with the internet. MS need to focus on their operating systems and office documents and let the internet professionals handle web browsers.

      February 3rd, 2012 at 05:50
  24. Michael

    @Joel: that looks fine in Firefox…

    January 12th, 2012 at 23:57
  25. Andi

    Just working on my layout, weeks ago I found the 3d css tester and I think, it is wunderbar, great!!!! This reminds me of hotmetalpro. But a little better. Thanks a lot, I will link your 3d css tester.

    February 10th, 2012 at 16:05
  26. Orlando Leite

    Sharing with you, added support for -moz 3d in http://g2brasil.com.br
    It works ok, but a little leg, maybe my pc.

    February 21st, 2012 at 12:33
  27. Oswald


    You might enjoy some of these samples:


    February 22nd, 2012 at 18:37
    1. nemo

      No attempt at all at cross-browser?
      Reflection admittedly uses an alternate (and more powerful) syntax in Firefox, but most of that could have so easily been made crossbrowser.

      Kinda sad.

      June 6th, 2012 at 08:00
  28. pendragon

    http://www.instantlyemail.com/ has a nice timer that flips in 3D. Seems to work slightly better in webkit than firefox at the moment. Useful for temporary email address too!

    July 10th, 2012 at 10:12

Comments are closed for this article.