Trik CSS: Membuat Gambar Berputar

Seperti apa gambar berputar yang dimaksud? Silahkan coba arahkan kursor ke gambar di bawah ini dan lihat apa yang terjadi:


Nah, untuk membuat efek gambar berputar menggunakan CSS, saya mengaplikasikan kode-kode berikut:

img#muter{
-moz-transition:all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
-o-transition:all .8s ease-in-out;
-webkit-transition:all .8s ease-in-out;
transition:all .8s ease-in-out
}

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

Lalu tambahkan parameter id='muter' pada kode gambar. Contoh:

<img id='muter' src='URL GAMBAR' />