3D transforms in Firefox 3.5 – the isocube

This demo was created by Zachary Johnson, a Minneapolis, MN based web developer who has also authored a jQuery plugin for animated “3D” rotation.

I’d like to show an example of a visual effect that can be accomplished using the new -moz-transform CSS transformation property that is available in the Firefox 3.5 browser. I was very excited to see this feature added to Firefox because I knew it would allow me to produce a faux-3D isometric effect, also sometimes called 2.5D. I created a demo where HTML content is mapped onto the faces of a “3D” isometric cube:

View the Demo in Firefox 3.5
isocube

The -moz-transform property can take a list of CSS transform functions including rotate, scale, skew, and translate. Or, multiple transformations can be done simultaneously using a single 2D affine transformation matrix. Because all of the CSS transformation functions work in two dimensions, true 3D transformations with perspective projection cannot yet be accomplished. In this demo, I use the rotate and skew transformation functions in order to create the isometric effect.

First, I define a container div for the cube, and then a square div for the top, left, and right faces of the cube.

<div class="cube">
    <div class="face top">
    </div>
    <div class="face left">
    </div>
    <div class="face right">
    </div>
</div>
.cube {
    position: absolute;
}
 
.face {
    position: absolute;
    width: 200px;
    height: 200px;
}

Without getting too wrapped up in isometric projection math, we have to rotate and skew the cube faces in order to turn each square div into a parallelogram where the angles of the vertices are 60° or 120°. Here are what those transformations look like using the new -moz-transform CSS property:

.top {
    -moz-transform: rotate(-45deg) skew(15deg, 15deg);
}
 
.left {
    -moz-transform: rotate(15deg) skew(15deg, 15deg);
}
 
.right {
    -moz-transform: rotate(-15deg) skew(-15deg, -15deg);
}

Now all that is left to do is to use absolute positioning to connect each transformed div in order to form the faces of the isometric cube. You can use matrix math to do this, or you could just move the faces around until they line up and it looks right.

To add to the 3D effect, I’ve shaded the isometric cube by assigning different colors to the faces. I also gave the cube a shadow. You can see that the shadow is basically just a copy of the top face of the cube moved down to the bottom left, and then I gave the shadow div a black background color and set opacity: 0.5; in the CSS to make it filter over the page background.

Any HTML, such as the text and form buttons in this example, can be put inside the div for any face of the cube. It will be translated into the correct perspective. Christopher Blizzard gave me the idea to throw video onto one side of the cube using the new HTML5 video tag now supported in Firefox 3.5. As you can see, it works great.

Finally, by making a copy of the cube markup and using two more of the CSS transformation functions, I was able to create a second cube. I made the cube 50% as big using a scale(0.5) transformation, and I moved it into place by using translate(600px, 400px).

I hope you found this demo to be interesting and that it opened up your mind to some exciting possibilities that Firefox 3.5 CSS transformations bring to the web.

CSS transformations are also supported by Safari 3.1+ and Chrome using the -webkit-transform CSS property.

About Christopher Blizzard

Making the web better, one release at a time.

More articles by Christopher Blizzard…


51 comments

  1. Dan

    I haven’t seen the transforms used like that before, very cool. I like how all of the text is selectable.

    June 15th, 2009 at 12:48

  2. Zacharias

    Why does the text jiggle as I select it?

    June 15th, 2009 at 13:24

  3. Magne Andersson

    I can’t see the text under the shadow of the big box, is the image in the article from an old version, or does it render differently on a Mac (which the button suggests it is)?

    June 15th, 2009 at 13:49

  4. Michael Kozakewich

    Would jQuery be able to handle animations of that? I’ll have to check. If you could do some crazy stuff to spin out a cube to display an external website in an iframe, it would be fantabulous.

    You could have buttons on the side to control navigation.

    June 15th, 2009 at 13:59

  5. Pino

    Lol, this example crashes my browser. Mozilla/5.0 (Windows; U; Windows NT 6.0; nl; rv:1.9.1) Gecko/20090612 Firefox/3.5. A very bad example of Firefox’s greatness :P

    June 15th, 2009 at 14:42

  6. […] Mozilla Hacks. Share this on del.icio.usDigg this!Stumble upon something good? Share it on StumbleUponShare this […]

    June 15th, 2009 at 14:49

  7. Magne Andersson

    @Michael Kozakewich – Is this what you mean? http://www.zachstronaut.com/lab/3d.html http://www.zachstronaut.com/projects/rotate3di/

    June 15th, 2009 at 17:19

  8. Rowno

    Lol, the demo crashes my Firefox too when I try to select text on the box.

    Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1b99) Gecko/20090605 Firefox/3.5b99 (.NET CLR 3.5.30729) on Windows XP

    June 15th, 2009 at 18:42

  9. kbrosnan

    Would either of the people who had crashes type about:crashes in the address bar and check for a crash ID. Either post back to this blog or email me commenter name at gmail dot com

    http://support.mozilla.com/en-US/kb/Mozilla+Crash+Reporter#Viewing_crash_reports

    June 15th, 2009 at 19:41

  10. g zgodero

    Nothing happens at all, no action, no crash… nada.

    June 15th, 2009 at 20:17

  11. […] 3.5 nos delitará con la posibilidad de realizar tranformaciones 3D nativamente. Esta propiedad del CSS nos permitirá, entre otras cosas, dar efecto de profundidad a los […]

    June 16th, 2009 at 00:01

  12. […] 3.5 nos delitará con la posibilidad de realizar tranformaciones 3D nativamente. Esta propiedad del CSS nos permitirá, entre otras cosas, dar efecto de profundidad a los […]

    June 16th, 2009 at 00:40

  13. Quezako

    I had a crash 1st time I clicked on th video with Fx 3.5b99 but I must admit this demo is amazing!

    June 16th, 2009 at 00:54

  14. tomh

    Quite cool, certainly shows some over the top uses for the properties. I must say that I couldn’t help think of tags when seeing this… Lets hope people who are capable of using this tag know how to do so sensibly ;-)

    June 16th, 2009 at 03:25

  15. Alfred Kayser

    Great! Not just the video is transformed, but also the controlbar (when it is enabled)!

    June 16th, 2009 at 05:17

  16. […] 3D transforms in Firefox 3.5 – the isocube at hacks.mozilla.org […]

    June 16th, 2009 at 05:24

  17. web designer

    Thank you
    will try it
    I am just wondering how it will look like on ie7
    regards

    June 16th, 2009 at 16:30

  18. Rowno

    The crash ID’s for both of my crashes on the isocube are 453109a7-8409-4c7a-aeda-176e72090615 and f50c518f-b86d-4e34-a890-491d92090615.

    June 16th, 2009 at 20:03

  19. […] 原文地址:3D transforms in Firefox 3.5 – the isocube 系列地址:颠覆网络35天 […]

    June 16th, 2009 at 22:25

  20. Quezako

    66c35595-a93a-4934-bb20-4038a2090616

    June 17th, 2009 at 01:40

  21. philoye

    FYI, this demo works just find in Mac/Safari 4, well, at least, in a recent Webkit nightly build.

    June 17th, 2009 at 03:22

  22. Magne Andersson

    @Web designer: It won’t work in IE7, nor IE8. As we all know by now, Microsoft is slow and keeps new standards away from becoming popular.

    June 17th, 2009 at 04:55

  23. […] noch sehr ruckelig – einen ersten Crash hatte ich bereits nach 5 Minuten beim testen der 3D-Transformierung. Generell findet man auf hacks.mozilla.org eine ganze Menge zum rumspielen, wenn man gerade mit der […]

    June 17th, 2009 at 14:38

  24. […] the video runs it uses the transformation property to rotate the video while it’s playing: function rotateMePlease() { // […]

    June 17th, 2009 at 22:05

  25. […] in honor of the hacks.mozilla.org recent article called 3D transforms in Firefox 3.5 – the isocube I added a similar hack to my tabbed message example extension.  I give […]

    June 18th, 2009 at 16:59

  26. […] in honor of the hacks.mozilla.org recent article called 3D transforms in Firefox 3.5 – the isocube I added a similar hack to my tabbed message example extension.  I give […]

    June 18th, 2009 at 23:06

  27. Denis Seleznev

    I am a fan CSS transform! :)

    http://webfilin.ru/files/notes/text-photo/firefox/

    June 19th, 2009 at 09:31

  28. […] the specific device characteristics such as aspect ratio, resolution, color capabilities, and more; cool 3D and image/font effects thanks to the <canvas> element; and lots of […]

    June 19th, 2009 at 22:40

  29. Alexandre

    Crash everytime after a few seconds, with FF3.5 RC2 on Windows Vista 64-bit.

    June 22nd, 2009 at 06:34

  30. Alexandre

    kbrosnan: Sorry, no crash ID. It looks like Firefox dies before generating the report. It try to contact you by mail with more information.

    June 22nd, 2009 at 07:36

  31. Alexandre

    Videos of the crash in different formats (all can be read by VLC)
    http://alexandre.alapetite.fr/prive/temp/20090622-Firefox3.5rc2-crash-isocube-Vista64.avi
    http://alexandre.alapetite.fr/prive/temp/20090622-Firefox3.5rc2-crash-isocube-Vista64.mp4
    http://alexandre.alapetite.fr/prive/temp/20090622-Firefox3.5rc2-crash-isocube-Vista64.ogv

    June 22nd, 2009 at 09:15

  32. Quezako

    @Alexandre did you try to deactivate all your add-onds?
    I have no problem with Firefox 3.5 RC2 + Windows 7 x64.

    June 22nd, 2009 at 11:51

  33. […] CSS 3D transforms. Try the demo, and don’t forget to select some text on the page http://hacks.mozilla.org/2009/06/3d-transforms-isocube/ […]

    June 26th, 2009 at 00:40

  34. DarthNihilus

    Does not work correctly with FF 3.5 RC 3. Somehow they overlab eachothers font, i don’t know…

    June 29th, 2009 at 12:51

  35. […] are supported too, making it possible to rotate and skew page elements. This feature has been used experimentally to simulate isometric 3D rendering. In the following image, a playable video and selectable text […]

    June 30th, 2009 at 10:44

  36. […] are supported too, making it possible to rotate and skew page elements. This feature has been used experimentally to simulate isometric 3D rendering. In the following image, a playable video and selectable text […]

    July 1st, 2009 at 08:20

  37. SelenIT

    Looks great! Thanks, Zachary and Christopher!

    But I’d like to suggest a little “improvement”: to replace the meaningless empty divs for the shadows of the cubes with other CSS3 (something like -moz-box-shadow: -398px 200px 3px rgba(0, 0, 0, 0.5); and the same with -webkit- for the top sides, this worked for me in Firefox 3.5, Safari 4/Win and Chrome 2).

    July 1st, 2009 at 11:04

  38. […] 3-D cubes built with standard HTML content, including the new native video component. […]

    July 1st, 2009 at 17:26

  39. aroth

    Add javascript to make the cube rotate in 3D, please.

    July 3rd, 2009 at 16:47

  40. […] are supported too, making it possible to rotate and skew page elements. This feature has been used experimentally to simulate isometric 3D rendering. In the following image, a playable video and selectable text […]

    July 5th, 2009 at 19:13

  41. Andre

    Are there w3c approved equivalents of these properties

    July 15th, 2009 at 07:34

  42. […] 写道” Safari 4浏览器核心WebKit在最近的一次更新中加入了3D CSS变换支持,FireFox 3.5也支持该特性。3D […]

    July 16th, 2009 at 03:29

  43. […] 原文地址:3D transforms in Firefox 3.5 – the isocube 系列地址:颠覆网络35天 […]

    July 23rd, 2009 at 20:33

  44. Hdaes32

    Why didn’t you add the non “-moz-” properties? :(
    Damn fanboys…

    December 22nd, 2009 at 03:40

  45. Magne Andersson

    @Hdaes32 That’s like asking why they even exist. At the time this was added to Gecko, it wasn’t a finished spec, therefore it must only support the properties with the prefix, just like any other engine/browser. I’m pretty sure the spec still isn’t stable enough.

    December 22nd, 2009 at 14:01

  46. freemh

    Looks great! , expects that it works on internet explore , Here is another example that I found interesting :
    http://depotwebdesigner.com/tutorials/how-to-create-3d-cube-with-css3.html

    July 25th, 2010 at 05:33

  47. […] border ….. et transition http://css3pie.com/ -> idem http://selectivizr.com/ ->CSS3 pour IE http://hacks.mozilla.org/2009/06/3d-transforms-isocube/ -> la puissance de css3 permetant de creer effet 3D http://www.fontsquirrel.com/fontface ->font […]

    February 24th, 2011 at 12:58

  48. […] une vidéo sur un plan 3D. Si votre interlocuteur insiste, ne vous laissez pas tromper par ce genre de démonstration : il y a certainement du Flash quelque part. Si l’on tente de vous prouver que cette […]

    March 20th, 2011 at 17:11

  49. Scott Gale

    Thanks for writing this post. It helped as I was building out this CSS coverflow example: http://scottgale.com/blog/coverflow-css-3d-transforms/2011/05/24/

    May 29th, 2011 at 05:53

  50. Murray

    I like how we can use these transformation options to create the isometric planes, but positioning them is a nightmare.

    “You can use matrix math to do this” – this is clearly an understatement.

    I would really like a follow up article focused on automatically positioning the different planes so they line up exactly.

    I’m using the transformations to display a box of varying size with patterns and text on each face. So all I need is the simple math functions where I feed in the dimensions of the face and it returns the HTML top and left values to position the face. Can anybody help?

    Cheers
    Murray

    October 24th, 2011 at 16:23

  51. […] Johnson and Paul Hayes showed some really nice examples of the CSS 2D transformation capabilites (isocube, 3D isocube using 2D […]

    October 26th, 2011 at 16:44

Comments are closed for this article.