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:
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.
I haven’t seen the transforms used like that before, very cool. I like how all of the text is selectable.
Why does the text jiggle as I select it?
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)?
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.
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
@Michael Kozakewich – Is this what you mean? http://www.zachstronaut.com/lab/3d.html http://www.zachstronaut.com/projects/rotate3di/
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
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
Nothing happens at all, no action, no crash… nada.
I had a crash 1st time I clicked on th video with Fx 3.5b99 but I must admit this demo is amazing!
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
Great! Not just the video is transformed, but also the controlbar (when it is enabled)!
Thank you
will try it
I am just wondering how it will look like on ie7
regards
The crash ID’s for both of my crashes on the isocube are 453109a7-8409-4c7a-aeda-176e72090615 and f50c518f-b86d-4e34-a890-491d92090615.
66c35595-a93a-4934-bb20-4038a2090616
FYI, this demo works just find in Mac/Safari 4, well, at least, in a recent Webkit nightly build.
@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.
I am a fan CSS transform!
http://webfilin.ru/files/notes/text-photo/firefox/
Crash everytime after a few seconds, with FF3.5 RC2 on Windows Vista 64-bit.
kbrosnan: Sorry, no crash ID. It looks like Firefox dies before generating the report. It try to contact you by mail with more information.
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
@Alexandre did you try to deactivate all your add-onds?
I have no problem with Firefox 3.5 RC2 + Windows 7 x64.
Does not work correctly with FF 3.5 RC 3. Somehow they overlab eachothers font, i don’t know…
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).
Add javascript to make the cube rotate in 3D, please.
Are there w3c approved equivalents of these properties