Mozilla Hacks

Getting you started for the CSS 3D transform Dev Derby (15 minute screencast)

Avatar photo By Chris Heilmann

Posted on March 6, 2012 in CSS and Screencast

This month’s Mozilla Dev Derby is about CSS 3D transformations and as a reminder and inspiration we thought it a good idea to give you a walk-through of a simple demo: a rotating cube with content on each side. That’s simple? Yes it is! Check the video to see the result:

You can also see it in action and grab the source on GitHub. So here is a 15 minute rough and ready walkthrough of what is going on in this code:

I hope that got you inspired a bit and we are looking forward to your Dev Derby contributions.

Read more:

About Chris Heilmann

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

More articles by Chris Heilmann…

7 comments

  1. Neel Mehta

    Awesome! CSS gets better and better… I’m old enough to remember the good old days of tags. How far we’ve come…

    March 6th, 2012 at 14:35

  2. Kesty

    This is what i am longing to see in web development

    March 6th, 2012 at 23:50

  3. S

    Thanks Chris, great intro. Now we just need “the” idea :)

    March 7th, 2012 at 02:27

  4. Alex

    we have update our 3D Image slider to work with Firefox 10+ CSS3D
    check it out http://getcu3er.com/javascript

    also, fennec (Mobile Firefox) does have CSS3D transformation properties in styles but it does not have 3D transformations implemented
    any idea when CSS3D will be included in mobile?

    March 7th, 2012 at 07:33

  5. pd

    Unfortunately the sidebar 3D transform on your own site Chris is another in the long list of technology looking for a solution that actually makes the web worse. In it’s rotated mode, at least on my compueter, all it does is render the text unreadable.

    Hopefully this dev derby can find the use for this technology (coverflow style image gallery?) that seems to be missing.

    March 7th, 2012 at 08:02

  6. Beben Koben

    I have this info
    http://undercover-blogger.blogspot.com/2012/02/demo-cube-animations.html

    March 7th, 2012 at 14:58

  7. Huan

    I submitted this one: https://developer.mozilla.org/en-US/demos/detail/css-3d-carousel-gallery
    Minimalist because I wasn’t able to test in Chrome (3D transforms are hardware accelerated only, and I don’t have the necessary hardware) or Opera (no released implementation) so there didn’t seem much point in having the carousel tilted off the horizontal plane just to show off the 3D, though I look forward to seeing others be more flamboyant with this method of image gallery :)

    March 10th, 2012 at 08:05

Comments are closed for this article.