Memutar gambar dengan CSS

Kita akan bermain lagi dengan gambar, kali ini kita akan memutar gambar saat mouse melewati gambar atau diarahkan pada gambar tersebut.

contoh hasilnya akan seperti ini :

Dari contoh diatas saya hanya memutar 10 derajat, berikut code yang akan kita pakai, untuk memutar 10 derajat :

Code CSS

.putar {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.putar:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

Code HTML

<div class="putar">
  <img src="http://link-gambar.jpg">
</div>

Untuk merubah putaran tinggal ganti saja angka pada "rotate(-10deg)"

---

Related Artikel Memutar gambar dengan CSS