Mozilla

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();
      break;
    }
    i++;
  }
  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;
  document.querySelector('head').appendChild(styles);
}

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!

39 comments

Comments are now closed.

  1. loffini wrote on October 26th, 2011 at 13:27:

    dont work for ff 7.0.1 OSx

    1. Chris Heilmann wrote on October 26th, 2011 at 13:29:

      Yes, that is cause 7 is not a nightly…

    2. paulo333 wrote on October 26th, 2011 at 14:50:

      You should read the four first lines, maybe…

  2. Zéfling wrote on October 26th, 2011 at 13:57:

    Mmmm, this demo not work yet :
    http://ikilote.net/Programmation/CSS/Test/transform-style.htm

  3. Jesse Ruderman wrote on October 26th, 2011 at 14:03:

    Where can I download NyanBrowser?

  4. Karl Böhlmark wrote on October 26th, 2011 at 14:45:

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

  5. Beben Koben wrote on October 26th, 2011 at 15:10:

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

  6. Richard wrote on October 26th, 2011 at 15:38:

    When WebKit support was announced, I made this:

    http://dev.rgraph.net/tests/video.html

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

    1. Omega X wrote on November 1st, 2011 at 16:50:

      WebM has been supported in Firefox since 4.0.

  7. AdamT wrote on October 27th, 2011 at 01:00:

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

    1. woodsy wrote on October 27th, 2011 at 03:44:

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

  8. Jonathan wrote on October 27th, 2011 at 02:04:

    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.

  9. Matt wrote on October 27th, 2011 at 03:38:

    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! : )

  10. mekal wrote on October 27th, 2011 at 03:46:

    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

    http://kiwik.goldzoneweb.info/scriptsite/livre.html

    http://kiwik.goldzoneweb.info/scriptsite/diap_3d.html

    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

  11. Gerben wrote on October 27th, 2011 at 09:12:

    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.

  12. Ken Saunders wrote on October 27th, 2011 at 12:51:

    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.
    :)

  13. Paul Irish wrote on October 29th, 2011 at 21:40:

    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. :)

  14. shirokoff wrote on November 1st, 2011 at 01:12:

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

    1. Matt Woodrow wrote on November 1st, 2011 at 22:44:

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

    2. Mark wrote on November 2nd, 2011 at 08:54:

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

  15. Michael wrote on November 11th, 2011 at 20:06:

    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:

    http://www.pcx360.com/games/169-Deus_Ex__Human_Revolution.htm

    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?

    1. nemo wrote on November 16th, 2011 at 12:36:

      https://bugzilla.mozilla.org/show_bug.cgi?id=702375

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

  16. Konrad Perko wrote on November 16th, 2011 at 09:41:

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

    1. nemo wrote on November 16th, 2011 at 12:36:

      I can win in 0 moves w/ firebug ;)

  17. Vinci wrote on November 17th, 2011 at 10:56:

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

    http://jsdo.it/vincicat/4bRd

    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 :(

  18. Michael wrote on November 19th, 2011 at 04:07:

    @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)

    1. Vinci wrote on November 20th, 2011 at 00:39:

      Hi Michael,

      Thank you. I removed the perspective but the effect is still not correct :X
      http://jsdo.it/vincicat/5V9l/

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

  19. nemo wrote on November 20th, 2011 at 15:27:

    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.

  20. SToto98 wrote on November 21st, 2011 at 12:34:

    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 ?

  21. is-real wrote on December 14th, 2011 at 19:09:

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

    http://www.is-real.net/experiments/css3/wonder-webkit/

  22. Samuel wrote on December 30th, 2011 at 14:09:

    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

    http://www.techsoftsolutions.net/demo/3dcss/css3D.html

  23. Joel wrote on January 11th, 2012 at 21:38:

    Check THIS out in Chrome/Safari:

    http://workshop.chromeexperiments.com/bookcase/

    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.

    1. Forkoff wrote on February 3rd, 2012 at 05:50:

      @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.

  24. Michael wrote on January 12th, 2012 at 23:57:

    @Joel: that looks fine in Firefox…

  25. Andi wrote on February 10th, 2012 at 16:05:

    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.
    andi

  26. Orlando Leite wrote on February 21st, 2012 at 12:33:

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

  27. Oswald wrote on February 22nd, 2012 at 18:37:

    Chris,

    You might enjoy some of these samples:
    https://code.google.com/p/css3-graphics/

    Oswald

    1. nemo wrote on June 6th, 2012 at 08:00:

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

      Kinda sad.

  28. pendragon wrote on July 10th, 2012 at 10:12:

    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!

Comments are closed for this article.