Membuat efek Berputar pada Icon atau Logo Blog

Tutorial cara membuat logo atau icon berputar pada blog dengan menggunakan css3 – Pada kesempatan kali ini saya akan membahas tentang bagaimana membuat efek berputar pada icon atau logo blog. Sebagai contoh saya akan membuat icon social media berputar yang ada pada blog. Ketika mouse berada diatas icon tersebut, maka icon tersebut akan berputar 360 derajat. Yah lumayan untuk mempercantik tampilan blog kita sehingga nyaman dilihat. Untuk melihat contohnya silahkan tempatkan mouse anda berada diatas icon social media yang ada pada blog freezon.

Untuk melakukannya kita cukup menambahkan icon css transition pada properti tag atau selector css social media tersebut dengan cara mencari tag social media yang ada pada template blog kita. Pertama-tama masuk ke akun bloger anda kemudian pilih menu template dan klik edit html. Tekan CTRL + F untuk mencari tag css social media tersebut. Contoh code css  social media yang ada pada template blog saya :

CLASS CSS ICON SOCIAL MEDIA :

Code css Sebelum dipasangkan efek berputar pada icon :

.social-profiles-widget img { margin:0 4px 0 0; }

Kemudian tambahkan code css3 untuk efek berputar pada image sehingga Nampak seperti contoh dibawah ini

Code css Sesudah dipasangkan efek berputar pada icon :

margin:0 4px 0 0; transition:all 0.8s ease-in-out 0s; -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; }

CLASS CSS ICON SOCIAL MEDIA KETIKA MOUSE BERADA DIATASNYA

Code css Sebelum dipasangkan efek berputar pada icon :

.social-profiles-widget img:hover { opacity:0.8; }

Code css Sesudah dipasangkan efek berputar pada icon :

.social-profiles-widget img:hover { opacity:0.8; transform:rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg);-ms-transform: rotate(360deg); }

Jika anda sudah menambahkan code diatas, tinggal melakukan penyimpanan. Refresh browser anda dan coba tempatkan mouse pada icon social media yang ada pada blog dan lihat hasilnya. Jika tidak terjadi efek berputar berarti ada kesalahan pemasangan code css pada tag social media. Pastikan agar tag yang dipasangkan efek berputar merupakan tag css dari icon social media tersebut.

 

Sumber : http://freezon88.blogspot.com/2013/10/membuat-efek-berputar-pada-icon-atau.html#more