Animasi Gambar Berputar saat kursor diarahkan

Hi Sahabat Blogger..
Kali ini AsalSuka akan berbagi trik kecil untuk memperindah blog/Web Anda.
Trik kali ini yang akan AsalSuka bagi adalah cara membuat sebuah gambar akan berputar, saat cursor diarahkan pada gambar tersebut, dengan efek waktu lambat atau cepat. tergantung keinginan Anda.

Caranya sangat mudah, cukup mengikuti langkah dibawah ini.

1. Login ke Blogger
2. Kemudian klik design, lalu Edit HTML
3. Kemudian masukan kode tag CSS dibawah ini sebelum kode </head> pada Edit HTML

<style type="text/css">
#rotate img
{
opacity:0.4;
transition:width 4s, height 4s;
-moz-transition:width 4s, height 4s, -moz-transform 4s; /* Firefox 4 */
-webkit-transition:width 4s, height 4s, -webkit-transform 4s; /* Safari and Chrome */
-o-transition:width 4s, height 4s, -o-transform 4s; /* Opera */
}
#rotate:hover img:hover
{
opacity:1;
transform:rotate(360deg);
-moz-transform:rotate(360deg); /* Firefox 4 */
-webkit-transform:rotate(360deg); /* Safari and Chrome */
-o-transform:rotate(360deg); /* Opera */
}
</style>

4. Pada gambar kepunyaan Anda yang akan dibuat memutar, Anda harus menempatkan id="rotate" agar gambar tersebut menjadi berputar. Yaitu sebagai contoh:
<a id="rotate" href="url tujuan"><img src="image.png"/></a> atau contoh lain:
<div id="rotate"><a href="url tujuan"><img src="image.png"/></a></div>
5. Setelah Anda memasang id="rotate" pastikan Anda save. dan lihatlah hasilnya.

Jika mengalami kesulitan, silahkan beri komentar Anda.. ^^
Terima kasih sudah berkunjung...
Happy Blogging ^^...