Mozilla

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:

7 comments

Comments are now closed.

  1. Andi Smith wrote on December 8th, 2011 at 00:46:

    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.

  2. pd wrote on December 8th, 2011 at 08:13:

    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.

    1. Jason wrote on December 8th, 2011 at 10:44:

      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.

  3. Beben Koben wrote on December 13th, 2011 at 05:13:

    more to learning…ty ♥

  4. Yoganandh wrote on March 6th, 2012 at 22:29:

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

  5. Aubrey Morrell wrote on March 27th, 2012 at 01:47:

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

  6. Courtney Cox wrote on March 27th, 2012 at 07:05:

    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.

Comments are closed for this article.