Rotating icons with css3

Today we will learn how to create a rotating graphic elements with css3. Such effects are frequently used in web design for the logo, because it's very attract attention. Place your mouse cursor on the icon and you will see how it rotates on its own axis.

rotate (xdeg). With it you can rotate the item to any number of degrees clockwise or counterclockwise.Let's look at some examples (cross-browser compatibility (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

Adding styles

<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>

Structure of HTML

<p><b>360 degree spin onMouseover and onMouseout</b></p>
<p id="socialicons">
<a href="http://www.wbupdates.com/">
<img border="0" src="rss.png" /></a>
<a href="http://www.wbupdates.com/">
<img border="0" src="delicious.png" /></a>
<a href="http://www.wbupdates.com/">
<img border="0" src="facebook.png" /></a>
<a href="http://www.wbupdates.com/">
<img border="0" src="twitter.png" /></a>
<a href="http://www.wbupdates.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.wbupdates.com/">
<img border="0" src="rss.png" /></a>
<a href="http://www.wbupdates.com/">
<img border="0" src="delicious.png" /></a>
<a href="http://www.wbupdates.com/">
<img border="0" src="facebook.png" /></a>
<a href="http://www.wbupdates.com/">
<img border="0" src="twitter.png" /></a>
<a href="http://www.wbupdates.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.wbupdates.com/">
<img border="0" src="rss.png" /></a>
<a href="http://www.wbupdates.com/">
<img border="0" src="delicious.png" /></a>
<a href="http://www.wbupdates.com/">
<img border="0" src="facebook.png" /></a>
<a href="http://www.wbupdates.com/">
<img border="0" src="twitter.png" /></a>
<a href="http://www.wbupdates.com/">
<img border="0" src="yahoo.png" /></a>
</p>

Icons can be downloaded  here

According to the materials  dynamicdrive