Friday, June 1, 2012

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

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...