Kali ini saya akan menjelaskan bagaimana cara agar supaya gambar bisa bergerak miring ketika mouse mendekat. cara ini sebenarnya kurang lebih sama dengan postingan yang saya buat di cara membuat tulisan terbalik sebelumnya, Cuma bedanya disini formatnya adalah gambar dan menggunakan effect hover. Oke, kita bisa lihat gambar hasilnya dibawah ini.
Untuk bisa seperti gambar di atas sobat bisa menggunakan kode css dibawah ini.
#miring img {transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
#miring img:hover { transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
}
Angka yang berwarna merah adalah sudut kemiringan ketika disorot, bisa kita ganti sesuai keinginan. Semoga bermanfaat.
|
| |
|
Dapatkan Email Harian! |
Follow us! 
|
wah bagus nih artikelnya
BalasHapuskunjungan balik ya gan
afinzdi.blogspot.com
mampir di blog ku gan gembelningrat1.blogspot.com
BalasHapus