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:
 
follow Anni3 on Twitterfollow Anni3 on Twitter
BiasaMiring tanpa hover miring
follow Anni3 on Twitterfollow Anni3 on Twitter
Biasa dengan hover miringMiring dengan hover miring


Sekarang pertanyaannya adalah Bagaimana Caranya?

Secara umum, inilah scriptnya.
Image miring tanpa hover miring
  • CSS
  • HTML (Jika image pakai link)
  • HTML (Jika image tidak pakai link)

Image biasa dengan hover miring
  • CSS
  • HTML (Jika image pakai link)
  • HTML (Jika image tidak pakai link)

Image miring dengan hover miring
  • CSS
  • HTML (Jika image pakai link)
  • HTML (Jika image tidak pakai link)

Gabungan dari CSS di atas


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 7o 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.

6 komentar:

  1. @Beben: Yang sabar ya... cuma CSS 3 nih.

    BalasHapus
  2. aNIta bagus tutorialnya,,, boleh dicoba gak???

    BalasHapus
  3. @Franco: sama-sama...
    @Yuda: boleh kok, tapi ingat ini cuma bisa untuk browser dengan dukungan CSS 3.

    BalasHapus
  4. hhaa trik blognya keren banget nih.. jhhee

    BalasHapus