Kita akan bermain lagi dengan gambar, kali ini kita akan memutar gambar saat mouse melewati gambar atau diarahkan pada gambar tersebut.
Dari contoh diatas saya hanya memutar 10 derajat, berikut code yang akan kita pakai, untuk memutar 10 derajat :
Untuk merubah putaran tinggal ganti saja angka pada "rotate(-10deg)"
contoh hasilnya akan seperti ini :

Code CSS
.putar {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.putar:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
Code HTML
<div class="putar">
<img src="http://link-gambar.jpg">
</div>
Untuk merubah putaran tinggal ganti saja angka pada "rotate(-10deg)"
Keren.... Tambahin Tutornya dibawah mas.
ReplyDeleteKalau untuk Buat gambar bayangan hanya dibawah gambar aja gimana ya mas?
cukup pakai CSS aja gan,
Deletecontoh pada gambar beri class 'bayang'
kemudian buat code CSS seperti ini :
<style>
.bayang {box-shadow: 7px 7px 5px #ccc;}
</style>
<img class='bayang' src="https://link-gambar-agan.jpg" />
ReplyDeleteExcellent blog here! Also your website loads up very fast! What host are you using? Can I get your affiliate link to your host? I wish my web site loaded up as fast as yours lol capitalone.com login
No matter if some one searches for his necessary thing, thus he/she desires to be available that in detail, therefore that thing is maintained over here. itunes account login
ReplyDeleteMAKASIH INFORMASINYA YA MANTAP KEEP WRITING
ReplyDelete