Dynamic Drive CSS Library- Spinning icons using CSS3 transform

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Image CSS: Links & Buttons: CSS3 demos: Here

Spinning icons using CSS3 transform

Author: Dynamic Drive

An effect that seems to be popping up with increased frequency is the spinning image, or more precisely, icons. Move the mouse over an icon, and it spins (rotates) on its axis to draw attention to itself. This is realized using CSS3's transform: rotate(xdeg) property. Using it you can rotate an element any number of degrees, clockwise or counter clock wise, and whether to do so one or both ways of a state change. Lets see some examples (best viewed in (IE10+, FF3.5+, Chrome/Safari, and Opera 10+):

360 degree spin onMouseover and onMouseout

60 degree spin onMouseover and onMouseout

-360 degree spin onMouseover ONLY

Credits: The social icons used can be obtained here:

A positive degree inside transform: rotate(xdeg) rotates the element clockwise, while negative (ie: -360deg) rotates it counterclockwise instead. To animate this property so the element actually spins into position, also make use of CSS3's transition property. Where the later property is defined affects whether the animation is played both ways or just during the onMouseover state. See the CSS below for all the intricacies.

The CSS:

<style>

p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

p#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

p#socialicons3 img:hover{ 
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

</style>

The HTML:

<b>360 degree spin onMouseover and onMouseout</b></p>

<p id="socialicons">
<a href="http://www.dynamicdrive.com/">
<img border="0" src="rss.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="delicious.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="facebook.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="twitter.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="yahoo.png" /></a>
</p>

<p><b>60 degree spin onMouseover and onMouseout</b></p>

<p id="socialicons2">
<a href="http://www.dynamicdrive.com/">
<img border="0" src="rss.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="delicious.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="facebook.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="twitter.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="yahoo.png" /></a>
</p>

<p><b>-360 degree spin onMouseover ONLY</b></p>

<p id="socialicons3">
<a href="http://www.dynamicdrive.com/">
<img border="0" src="rss.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="delicious.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="facebook.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="twitter.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="yahoo.png" /></a>
</p>

Code Info

Rate this code:

Date Posted: 12/28/2011

Revision History: None

Usage Terms: Click here

Your Comments (4)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 1 pages

So is it necessary to have the browser identified? Could you use transition: all 0.5s ease-in-out

Posted by Christopher Pritchard on 12/29, 12:55 PM

Very nice. I love the images and the spinning is very smooth.

Posted by Cater Bradly on 01/01, 11:05 AM

only second icons spins. rest is static, is it my browser issue or what. anyways thanks

Posted by webbi527 on 01/10, 06:00 AM

Anyone else getting a flicker when the icons are hovered over? The window seems to spontaneously blink on hovering some icons. It may be because I'm using a beta version of Chrome (17), but wondered if anyone else was getting the same.

Otherwise, cool effect and will research into use on my website thanks to your effect, thank you.

Posted by Joseph Shambrook on 01/11, 04:25 AM

Comment Pages 1 of 1 pages

Commenting is not available in this weblog entry.