Trik Rotasi Gambar Dengan CSS

Terkadang kita sering merotasi foto kita, entah di Facebook atau di blog, yang biasanya bertujuan untuk memberikan efek realistis dan tidak kaku. Tapi ternyata kita juga bisa lho merotasikan foto kamu dengan CSS, baik saat biasa maupun saat disentuh kursor. Tapi sayangnya trik ini hanya ampuh untuk browser dengan dukungan CSS 3, sisanya? Good bye aja deh!

Contoh:

Biasa	Miring tanpa hover miring
Biasa dengan hover miring	Miring dengan hover miring

Sekarang pertanyaannya adalah Bagaimana Caranya?

Secara umum, inilah scriptnya.
Image miring tanpa hover miring

• CSS
  .rotasi1 { transform: rotate(-7deg); -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }
• HTML (Jika image pakai link)
  <a class="rotasi1" href="Your Link"><img border="0" src="Your Image Link"/></a>
• HTML (Jika image tidak pakai link)
  <span class="rotasi1"><img border="0" src="Your Image Link"/></span>

Image biasa dengan hover miring

• CSS
  .rotasi2:hover { transform: rotate(7deg); -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -o-transform: rotate(7deg); }
• HTML (Jika image pakai link)
  <a class="rotasi2" href="Your Link"><img border="0" src="Your Image Link"/></a>
• HTML (Jika image tidak pakai link)
  <span class="rotasi2"><img border="0" src="Your Image Link"/></span>

Image miring dengan hover miring

• CSS
  .rotasi3 { transform: rotate(7deg); -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -o-transform: rotate(7deg); } .rotasi3:hover { transform: rotate(-7deg); -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }
• HTML (Jika image pakai link)
  <a class="rotasi3" href="Your Link"><img border="0" src="Your Image Link"/></a>
• HTML (Jika image tidak pakai link)
  <span class="rotasi3"><img border="0" src="Your Image Link"/></span>

Gabungan dari CSS di atas
.rotasi1 { transform: rotate(-7deg); -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); } .rotasi2:hover { transform: rotate(7deg); -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -o-transform: rotate(7deg); } .rotasi3 { transform: rotate(7deg); -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -o-transform: rotate(7deg); } .rotasi3:hover { transform: rotate(-7deg); -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }

Penjelasan

• Hover adalah keadaan saat kursor menyentuh/berada di atas objek (dalam posting ini adalah image).
• Image adalah gambar/foto.
• 7deg adalah nilai rotasi untuk rotasi 7^o searah jarum jam dan bisa diubah sesuai keinginan.
• Angka bisa diberi nilai negatif (-) untuk rotasi berlawanan arah jarum jam, misal -7.
• Your Link diganti dengan link tujuan (jangan lupa dengan http:// di depan)
• Your Image Link diganti dengan link image (jangan lupa juga dengan http:// di depan)
• Script bisa ditambah atau dikurangi (alias dimodifikasi) sesuai dengan kebutuhan masing-masing.

Untuk Blogger

• Cara menambahkan CSS
  - Ke Dasbor Blogger > Tata Letak > Edit HTML.
  - Tambahkan CSS di atas script ]]></b:skin>.
  - Klik Simpan template
• Cara menambahkan HTML
  - Langsung copy paste HTML ke tempat yang diinginkan (di elemen halaman, di posting, di sidebar, dll).
  - Ganti Your Link dan Your Image Link sesuai dengan ketentuan di bagian penjelasan.

Masih kurang jelas? Silakan bertanya di tempat komentar di bawah.

Artikel Terkait di Bawah posting