I would just like to preface this post by saying that I’m not the kind of person who likes putting spinning icons on things. Really, I don’t! And I hope that this example doesn’t spawn a subset of rotating social media icons! I’m just experimenting with what I like to call “Applied CSS3″ at the moment and this seemed like a good case study. “Applied CSS3″ means techniques that are actually useful (well, to varying degrees!) and usable on sites I’m working on. I put my background image/gradient stacks in this category as well as this example (because I might actually have to use this some day *shiver* in a production site!)
So with that out of the way, here’s what I have done and why… Occasionally there’s a client that absolutely can’t live without a spinning “3D” version of their logo. I don’t mean actual 3D, because that would be costly, but the “spinning sign effect”. One of my predecessors at the company created a way of doing this is Flash with some creative transforms and keyframing to create an optical illusion. My aim here was to replicate that in CSS3 so I have yet another reason to avoid interacting with the Flash interface 
As it turns out, keyframing this in CSS is way easier than trying to do it using actual keyframes in Flash. CSS 1 : Flash 0
This is only done for webkit (using vendor prefix) but there’s a nice fallback in that the icons are just flat in other browsers where the animation is unsupported. Where I have used this on sites in the past (eg www.gatewaycork.com) that would be perfectly acceptable to me. I’m not sure if this is supported in FF4, if it is I’ll try and replicate for Mozilla soon as well.
Results
I’ve done 2 versions of this – the first is a straight replication of the effect which was done in Flash. The second looks a bit nicer I think – it doesn’t have the skew and uses a bit of easing. Remember, this will work in Webkit browsers only! Everything else will just show a lot of static images… boring!
Experimentation
This was a lot easier than I thought it would be, having never tried either a CSS3 transform or animation before! Once I found some sources of reference (see section below), it was plain sailing. View the source on the demo page to see what’s going on. I’ve commented it well. In short, I replicated keyframes from the source Flash movie using CSS3 transforms on individual images. Then I set up some webkit-animation keyframes using each of the transforms in a keyframe but I realised that I don’t need as many keyframes as Flash did because I don’t have to manual flip the image or anything. CSS3 is clever enough to know that rotating around the y-axis means it’s flipping over. In the end I just went from 0 to 90 (with a skew) to 180 (no skew) to 90 (inverse skew value) and back to 0. I did a continuous animation but I could just have gone to the 180 point and set the animation direction to alternate though (I think… must check it out) and it would have reversed all on its own. The second version is even easier, just rotating from 0 – 360 degrees!
References & Interesting Examples
I saw this after I completed the animation as I was just skimming through. Paul R Hayes actually did what I did a while back but using the perspective property, I think. I haven’t managed to get a perspective example working for me apart from his so not sure what it’s all about to be honest! I’ll stick with “faking it” on the Y-axis
These were useful references and examples while I was building the experiment:
http://css3.bradshawenterprises.com/
http://www.standardista.com/css3-transforms
http://www.the-art-of-web.com/css/css-animation/
http://insideria.com/2010/02/controlling-animation-using-cs.html
http://css-infos.net/property/-webkit-animation-timing-function
http://webkit.org/blog/324/css-animation-2/
http://css-infos.net/property/-webkit-animation-direction
http://addyosmani.com/blog/how-to-create-impressive-animations-using-webkit-css-and-javascript/
http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/
http://www.leemunroe.com/css3-animations/
Bonus
Ok, so I had to do it and I’m sorry. Tasteless rotating social icons – view demo.
