Screencast: 3D CSS rollovers and 3D CSS tester

CSS 3D transforms as supported in the latest Aurora allow us to do some nice effects that in the past were only possible in Flash or with a lot of trickery using skewing and filters. I was asked to show a small demo the other day and thought it would be fun to spice up the classic image rollover:

You can see this in action using Chrome, Safari or Firefox Aurora/Nightly. Older browsers should just show a normal roll-over (and yes, the first example looks weird due to the logo transparency but it makes the effect much cooler in supporting browsers).

As people asked how this is done I thought it easiest to create a testing tool where you can play with 3D CSS yourself. Here’s a screencast where I explain how to use it and how the roll-over effects were done.

I found a few interesting bugs while creating this and will file them now. This is the benefit of playing with new tech. Enjoy!

More reading on this:

About Chris Heilmann

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

More articles by Chris Heilmann…


  1. Andi Smith

    Awesome, thank you. Was actually thinking of building a tester myself but you’ve beaten me to it!

    One problem I find with CSS animations (3D or otherwise) is that if there is an error in my code they are really hard to debug. There’s no way (to my knowledge) to add breakpoints etc.

    Testing tools like this one reduce the risk of errors but do you know of a way to debug properly? Is this something Firefox would possibly add as a future addition to their developer tools suite? Interested in helping with this but not really sure where to start.

    December 8th, 2011 at 00:46
  2. pd

    Looks good however I just cannot think of a use case for an ordinary web page. Maybe I don’t do sites for enough companies or purposes that have an audience who would appreciate eye candy for the sake of eye candy.

    December 8th, 2011 at 08:13
    1. Jason

      The standard use cases I can think of are for a “flipcard” and a rotating carousel image gallery. I actually tried both of those out for experiments.

      December 8th, 2011 at 10:44
  3. Beben Koben

    more to learning…ty ♥

    December 13th, 2011 at 05:13
  4. Yoganandh

    Awesome,…. Tanx for making it avail for all with code builder

    March 6th, 2012 at 22:29
  5. Aubrey Morrell

    Noooo!!!!! Don’t let your clients see this one. Take the internet back to 1987 – 3D spinning flaming logos!!!

    March 27th, 2012 at 01:47
  6. Courtney Cox

    I think this would be great for the top-left logos on many sites. Thanks for this tester! I’m definitely going to be using it soon.

    March 27th, 2012 at 07:05

Comments are closed for this article.