Efek Rotation Image dengan CSS

Pernah lihat efek rotation image dengan css ? ? Itu lho . .  efek yang membuat gambar beputar saat cursor berada diatas nya (hover). Liat screen shot dibawah biar lebih jelas :)

Dari screnshot diatas jelas terlihat jika gambar dalam keadaan aktif (hover) maka gambar tersebut akan berputar dan opacity nya menjadi '1' (lebih terang).
Sekarang kita mulai tahap coding nya, hal yang pertama kita lakukan adalah menyisipkan sedikit code CSS.

img.putar {
 opacity:0.5;
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition:all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -transition: all 0.3s ease-in-out;
}


img.putar:hover{
 opacity:1.0;
  transform: rotate(5deg);
 -moz-transform: rotate(5deg);
 -o-transform: rotate-5deg);
 -webkit-transform: rotate(5deg);
}

Langkah selanjutnya kita tingga menambahkan class pada kode image nya, liat screenshot di bawah :

Jika semua dilakukan dengan benar, maka gambar tersebut akan berputar saat dalam keadaan di-Hover. Ternyata CSS itu gampang lho . . .  :D Kalo masih bingung silahkan comment aja .

Anda sedang membaca artikel tentang Efek Rotation Image dengan CSS dan anda bisa menemukan artikel Efek Rotation Image dengan CSS ini dengan url http://blogger-kerinci.blogspot.com/2012/06/efek-rotation-image-dengan-css.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Efek Rotation Image dengan CSS ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Efek Rotation Image dengan CSS sebagai sumbernya.