Home » CSS » Memutar gambar dengan CSS

Memutar gambar dengan CSS

Memutar gambar dengan CSS By : at 13.7.15 Share To : Facebook Twitter Google+
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 :


putar gambar webjalanan

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

3 comments:

  1. Keren.... Tambahin Tutornya dibawah mas.
    Kalau untuk Buat gambar bayangan hanya dibawah gambar aja gimana ya mas?

    ReplyDelete
    Replies

    1. cukup pakai CSS aja gan,
      contoh pada gambar beri class 'bayang'
      kemudian buat code CSS seperti ini :
      <style>
      .bayang {box-shadow: 7px 7px 5px #ccc;}
      </style>
      <img class='bayang' src="https://link-gambar-agan.jpg" />

      Delete


  2. Excellent blog here! Also your website loads up very fast! What host are you using? Can I get your affiliate link to your host? I wish my web site loaded up as fast as yours lol capitalone.com login

    ReplyDelete