Css Animasi Berputar Pada Icon

Beberapa hari lalu ada yang bertanya kepada saya mengenai kode dasar untuk membuat animasi icon pada blogger. Kebetulan dulu saya pernah membuat animasi untuk sosial icon melayang dimana jika kursor di arahkan pada icon tersebut maka icon yang disorot kursor akan berubah menjadi membesar dan berputar 2x 360 derajat. Animasi sosial media yang pernah saya buat ini bisa dilihat disini: https://www.bersosial.com/topic/1361/social-icon-melayang-berputar-spin-2x360-derajat

Sebenarnya untuk membuat animasi/effect ini cukup mudah, karena disini kita hanya berusaha memaksimalkan file .js (jQuery code) yang biasanya sudah ada pada template bawaan blogger, sedangkan untuk blog yang lain seperti wordpress saya kurang tau soalnya belum pernah mainan wordpress apalagi seperti Drupal dkk. Maklum masih o'ot dan butuh banyak belajar lagi. Ok. langsung saja, kira-kira kode dasarnya seperti ini :

.rotate{

    -webkit-transition-duration: 0.8s;

    -moz-transition-duration: 0.8s;

    -o-transition-duration: 0.8s;

    transition-duration: 0.8s;

     

    -webkit-transition-property: -webkit-transform;

    -moz-transition-property: -moz-transform;

    -o-transition-property: -o-transform;

    transition-property: transform;

     

    overflow:hidden;

    }  

.rotate:hover  

{

    -webkit-transform:rotate(360deg);

    -moz-transform:rotate(360deg);

    -o-transform:rotate(360deg);

} 

- See more at: http://blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html#sthash.QyqhLujP.dpuf

.glundung{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    
    overflow:hidden;

    } 

.glundung :hover 
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

Kode css diatas adalah kode dasar untuk membuat animasi berputar pada icon. Pada kode tersebut saya menggunakan class "glundung" maka silahkan membuat html clasnya menggunakan "glundung" juga untuk membuat objek (icon) memilki efek berputar, atau bisa juga class css-nya di ganti dgn kata lain sesuai keinginan tema-teman. Untuk sosial icon yang pernah saya publish di forum www.bersosial.com sudah saya modifikasi sedikit dengan penambahan efek zooming, sedangkan untuk putarannya silahkan diganti pada code diatas yang saya bold warna hijau, pada kode css yang saya share di forum bersosial menggunakan 2x putaran berarti 720deg.Sedangkan kode yang saya bold biru diatas adalah kode untuk waktu putarnya (jadi semacam periode putarnya). 

Salah satu model animasi berputar yang sedikit rumit yaitu model sosial icon yang saya gunakan pada widget sosial di http://demo.irmawan.me/, karena pada widget tersebut saya tidak menggunakan image tetapi menggunakan kombinasi dari font awesome sebagai pengganti icon image. Jadi untuk membuatnya semuanya tergantung pada kreatifitas anda, semakin tinggi imajinasi Anda maka saya yakin efek animasi icon yang teman-teman buat bakal lebih bagus lagi dari punya saya.

Update:
Ada yang masih bingung contoh html classnya buat css diatas jadi saya kasih contoh aja sekalian. Kira-kira formatnya class html untuk objeknya seperti ini:

<div class="glundung">
<!-- Facebook -->
<a href="url_facebook anda" title="Judul icon sesuka anda" target="_blank"><img alt="keterangan alt image anda" src="url_icon yang ingin digunakan" /></a></div>

jQuery code

jQuery code

jQuery code