Membuat Gambar Memutar Ketika di Hover

bagaimanakah cara cara membuat file gambar memutar ke kiri ke kanan ketika di kunjungi pointer mouse ( mouse over ) menggunakan CSS ..?

yupss ,, Tutorial kita kali ini yaitu membahas Efek Memutar , dimana file gambar akan memutar ke kiri dan ke kanan ketika pointer mouse mengunjungi gambar tersebut .
Sebetulnya trik ini cukup mudah hanya menggabungkan efek transisi dan transform rotate 2D .
Selengkapnya anda bisa membaca Artikel sebelumnya yaitu Efek transition ini . atau baca juga Artikel mengenai Efek Transform Rotate 2D.
Lihat Gambar di bawah ini :

hasil gambar di samping sebagai berikut ini penulisan CSS dan html nya :

<style>.efek_putar {position:relative;top:0;left:0;margin:0;padding:0;height:50px;} .efek_putar img{ width:50px; height:50px;float:left;margin:0;padding:0;display:block;transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;transform:rotate(-360deg);-webkit-transform:rotate(-360deg);-o-transform:rotate(-360deg);-moz-transform:rotate(-360deg);opacity:0.6;filter:alpha(opacity=60);} .efek_putar img:hover{transform:rotate(360deg);-moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg);opacity:1;filter:alpha(opacity=100);} </style><br /><div class="efek_putar"><img src="https://sites.google.com/site/blognyamastony/iconblog/prev_icon.png" /><br /><img src="https://sites.google.com/site/blognyamastony/iconblog/home%20black.png" /><br /><img src="https://sites.google.com/site/blognyamastony/iconblog/next_icon.png" /></div>

Lalu bagaimanakah cara memberi link pada gambar agar dapat di click .

Anda juga dapat menambahkan link / tautan pada gambar tersebut yaitu url gambar yang diselipkan ditengah link seperti berikut ini :

<a href="http://lokasipref.html">
<img src="https://sites.google.com/site/blognyamastony/iconblog/prev_icon.png" />
</a>
<a href="lokasihome.html"><img src="https://sites.google.com/site/blognyamastony/iconblog/home%20black.png" />
</a>
<a href="lokasinext.html"><img src="https://sites.google.com/site/blognyamastony/iconblog/next_icon.png" />
</a>

dan mungkin ada beberapa previewnya agak kurang baik untuk contoh lainnya silahkan mouse over pada menu plus di pojok kanan bawah di blognya mastony .
oya ,, mungkin anda ingin juga baca artikel mengenai efek transform rotate 3D silahkan baca disini Transform Rotate 3D . dan saya rasa cukup disini pembahasan mengenai efek memutar pada gambar ketika di hover ( mouse over ) ini selesai semoga bermanfaat .