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 .
Read More …

Powered by

Pengikut

Total Tayangan Halaman

Follow on G+