Today is a very quick, fun tip showing you how to spin an item on hover. This technique is used right here on my site, so you can see it in action by hovering over the Mole logo on the left.

This is probably not the most practical of tutorials, but hey this one’s just for fun to show just a little bit of what you can do with CSS3.

In terms of the HTML, I’ve just got my logo, a .png image inside a h1 tag with an id of ‘logo’.

Now we’re going to make the logo spin using the CSS3 properties transform and transition.

h1#logo:hover {
 -moz-transform: rotate(360deg);
 -webkit-transform: rotate(360deg);
 -moz-transition: all ease 1s;
 -webkit-transition: all ease 1s;
 -o-transition: all ease 1s;
 transition: all ease 1s;
}

The first thing we do is rotate the logo 360 degrees using the transform property giving it a value of rotate(360deg). This will spin the logo 360deg clockwise, to rotate anti-clockwise just use the value rotate(-360deg).

This on it’s own will not actually affect the logo at all on hover as rotating an element 360 degrees returns it to the same position that it started so we need to add some css transitions to animate the effect.

The values used can be explained as follows.

all indicates that all properties of the :hover class will be affected by this.

ease is the type of transition to use. There are other options such as ease-in, ease-out and linear

1s is the time is takes for the transition to take place. For more subtle affects on hovers such as background color values like .2s can be effective.

Now obviously this time of effect won’t be visible to users of Internet Explorer but be sure to add all the prefixes shown (-moz-, -webkit-, -o-) to enable it in Firefox and Webkit browsers like Chrome and Safari.