Gambar miring setelah disorot

Masih seputar gambar miring, kalau kemaren aku bikin tips membuat gambar miring kali ini gambar tersebut akan saya buat bergerak miring ke kanan tujuh derajat. Dalam keadaan normal gambar tetap pada posisi lurus, akan tetapi bila mouse kita dekatkan pada gambar tersebut akan bergerak memutar searah jarum jam dengan kemiringan 7 derajat.

Entah kenapa akhir-akhir ini rey suka memposting artikel yang miring-miring, awalnya sih enggak suka tapi lama-lama bosen juga sama yang lurus dan setelah memakai gaya miring eh… ternyata gaya miring itu lebih enak lho (wah rey mulai nglenatur ngomongnya, jangan-jangan otaknya mulai miring neh?..)

Oke lah kalau begitu kita langsung ke cara membuatnya,
Ini kode yang dipakai untuk membuat gambar miring setelah disorot mouse :

Kode CSSnya :

.rotreys {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
}

.rotreys:hover {
transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
}

Dan ini kode HTMLnya:
Bila memakai link:

<a class="rotreys" href="Your Link"><img border="0" src="Your Image Link"/></a>

Bila tanpa link:

<span class="rotreys"><img border="0" src="Your Image Link"/></span>

Keterangan :

• Hover adalah keadaan saat kursor menyentuh/berada di atas objek (dalam posting ini adalah image).
• 7deg adalah nilai rotasi untuk rotasi 7 derajat 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)

Contoh penerapan di dalam postingan :
Copas kode di bawah ini ke dalam postingan blog anda, lalu anda akan melihat hasilnya seperti pada demo berikut ini :

Lihat Demo

<style type="text/css">
.rotreys {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
.rotreys:hover {
transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
}
</style>
<span class="rotreys">
<img border="0" height="240" src="http://4.bp.blogspot.com/-kZpyTenPyPQ/TXnJPYnD0VI/AAAAAAAABjI/uGE6QMylwlU/s320/pelampungrey.jpg" alt="efek_miring" width="320" />
</span>