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

Blogger

• Kamus Nama bagus
• Efek Box Gelap Terang Menggunakan Opacity Effect dan CSS3 Transition
• Merubah Lebar Template Blog
• Cara Membuat New Recent Comment dengan Scroll Down di Blogspot
• Cara Memasang Yahoo Messenger Di Blogger
• Cara membuat browser bergetar saat klik kanan
• Cara Membuat Sitemap di Blogspot
• Membuat Widget Agar Selalu Tetep Berada Di Kiri,Kanan,Dll
• Cara Pasang Buku Tamu Facebook di Blog
• Tips Cara Pasang Status / ikon YM (yahoo messenger) di blog/web/friendster !
• Mengganti Tulisan Newer Post Older Post Dengan Gambar
• Cara Membuat Vertical Sliding Info Panel With jQuery
• Memasang Radio Online atau MP3 di Blog
• SEXY BOOKMARKS V2 FOR BLOGGER
• Show Comment Bubble at Top Right of each Blogger Posts
• Automatic Read More with Thumbnail for Blogger
• Social Bookmarking Widget for Blogger with auto scrolling function
• CARA MEMBUAT EXPLORER D-TREE...
• Cara Pasang Tag Meta Robot Blogspot
• Cara Membuat Drop Caps Otomatis di Posting Blog
• Koleksi banner blog dofollow
• Cara mengecek kecepatan Blog
• Membuat Link Terbuka Pada Halaman Baru
• Memasang Feedjit Pada Blogger
• Membuat Gradient Effect dengan CSS

Gambar

• Mengganti Tulisan Newer Post Older Post Dengan Gambar
• Koleksi banner blog dofollow
• Image Gallery With CSS3
• JON'S
• Gambar GIF / Gambar Gerak 2
• Apakah Blog Kamu Gaul?
• Membuat Gambar Melayang di Blog
• CARA EDIT INFO FILE MP3 (MENAMBAH gambar COVER,ALBUM,TITTLE,ARTIS,GENRE DLL)
• Gambar Bergerak
• Koleksi gambar readmore

CSS

• Cara Membuat Vertical Sliding Info Panel With jQuery
• Membuat Gradient Effect dengan CSS
• CSS Shadow - Membuat Bayangan Dengan CSS
• Kenalan Dengan Border Lengkung
• Image Gallery With CSS3
• Membuat Back To Top Dengan CSS
• Membuat Arsip dan Label Blog model Scroll
• Membuat Gambar Melayang di Blog
• CARA MEMBUAT TOOLTIPS DI BLOG...
• Membuat Sliding Login/Register Form Panel di Blogspot [JQery]