Spyning icon Rotasi pada gambar menggunakan css3

Kali ini kita akan membuat rotasi pada gambar menggunakan kode html dan css3. Trik ini dapat anda gunakan untuk menu animasi, header animasi dan lain-lain yang ada animasinya.

Seperti biasanya kita mulai dengan kode CSS..
Berikut kode CSS3 nya :

<style>

#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;
}

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

#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;
}

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

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

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

Berputar bolak balik 360 derajat jika mouse mendekati objek

<div id="socialicons">
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a></div>

Berputar 60 derajar jika mouse mendekati objek atau menjauhi

<div id="socialicons2">
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a>
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a><a href="http://codestyle.blogspot.com/">
<img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a></div>

Berputar terbalik 360 derajar jika mouse mendekati objek saja

<div id="socialicons3">
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a>
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a></div>

Bagaimana, mudah bukan? segalanya kini lebih mudah dengan adanya fitur html5 dan css3. semoga bermanfaat ...