Cara membuat gambar berputar dengan CSS Hover 100% work

Pernahkah anda melihat gambar yang bisa berputar ketika mouse diarahkan ke gambar tersebut? Nah disini Teknlogi Informatika akan memberikan tips untuk membuatnya di blog/website anda.

Membuat Gambar Berputar dengan CSS

Cara Membuat Gambar Berputar

Pertama tambahkan parameter id=”” atau class=”” anda pada kode <img> anda, sebagai contoh disini saya beri nama gambarmuter :

<img id="gambarmuter" src="url gambar anda" />

lalu buat kode css-nya seperti berikut:
img#gambarmuter {
-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#gambarmuter:hover {
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}

Setelah itu simpan script tersebut, maka gambar anda akan terlihat lebih menarik karena bisa berputer ketika kursor diarahkan ke gambar tersebut.