Berikut adalah Membuat Object Bergerak Berputar Ketika Disentuh dengan menggunakan Menggunakan CSS

Membuat Object Berputar Ketika disentuh Menggunakan CSS

—

by

Webbiz.ID
in

Berikut adalah Membuat Object Bergerak Berputar Ketika Disentuh dengan menggunakan Menggunakan CSS.

Pertama kita perlu membuat class “object“

HTML
<div class="objek"></div>
HTML

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);
        }
CSS

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>
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!

Artikel Terbaru ⭐