Hallo teman-teman Bertemu lagi pada tutorial dumet school, Pada tutorial kali ini,saya akan mengajarkan bagaimana cara merubah bentuk element ketika di hover dengan transform rotate css.
Trasform rotate pada css berfungsi untuk memutar suatu element, transform rotate mempunyai satuan deg dalam penulisan cssnya, oke untuk lebih jelasnya kita langsung saja praktekan satu studi kasus, dimana saya akan memutar suatu element dan merubah bentuknya ketika saya hover pada element tersebut.
Pertama silahkan teman-teman buat sebuah file dan ketikan script berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> </head> <body> <div></div> </body> </html> |
Saya membuat sebuah element div lalu saya memberikan css seperti ini :
|
1 2 3 4 5 6 7 8 9 |
<style> div { width: 100px; height: 100px; background-color: red; transition:all 0.5s ease } </style> |
Saya anggap teman-teman paham untuk fungsi dari style diatas, Lalu saya mengatur element div ketika di hover, coba tambahkan script css berikut ini :
|
1 |
div:hover{ transform: rotate(100deg); border-radius:50%;} |
script diatas saya mengatur element div ketika dihover mengalami transform atau perputaran sebanyak 100ged dan border radius 50%,
Hasilnya ketika element div dihover maka element tersebut akan berputar sebanyak 100deg dan mengalami kelengkungan sebanyak 50%.
Gimana teman-teman? cukup mudah bukan?, untuk tutorial kali ini tentang merubah bentuk element ketika di hover dengan transform rotate css cukup sampai sini dulu, sampai bertemu pada tutorial berikutnya,
terimakasih.