Berikut adalah Membuat Object Bergerak Berputar Ketika Disentuh dengan menggunakan Menggunakan CSS.
Pertama kita perlu membuat class “object“
HTML
<div class="objek"></div>Kedua, buat CSS nya.
CSS
.objek {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s;
}
.objek:hover {
transform: translate(-50%, -50%) rotate(360deg);
}Outputnya :
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.objek {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s;
}
.objek:hover {
transform: translate(-50%, -50%) rotate(360deg);
}
</style>
</head>
<body>
<div class="objek"></div>
</body>
</html>See the Pen Membuat Object Berputar Ketika disentuh Menggunakan CSS by WebbizID (@De-Orchids) on CodePen.
Anda dapat menyalin kode di atas ke dalam file HTML dan membukanya di browser untuk melihat objek bergerak dan berputar ketika disentuh.
Jika Anda ingin mengubah warna atau ukuran objek, Anda dapat mengedit properti CSS yang sesuai dalam kode di atas.
Selamat mencoba!
Leave a Reply