Efek Hover: I

Pelajaran 30 dari 31 dalam kursus Kartu 3D | Proyek Front-end di Coddy.

Kode ini membuat efek hover pada elemen dengan class "card" yang berada di dalam elemen dengan class "parent". Saat kamu mengarahkan kursor ke elemen parent, card akan sedikit berputar, lalu beberapa efek bayangan dan pergeseran akan diterapkan pada bagian-bagian card yang berbeda:

Card itu sendiri akan sedikit berputar, sebesar 30 derajat, pada sumbu yang ditentukan oleh (1, 1, 0).
Card akan mendapatkan efek box-shadow agar tampak terangkat.
Tombol sosial di bagian bawah card akan bergerak ke atas sejauh 50 piksel dan mendapatkan efek bayangan.
Lingkaran kedua pada logo akan bergerak ke atas sejauh 60 piksel.
Lingkaran ketiga pada logo akan bergerak ke atas sejauh 80 piksel.
Lingkaran keempat pada logo akan bergerak ke atas sejauh 100 piksel.

Tantangan

Mudah

Gunakan kode ini: (Penting)

.parent:hover .card {
  transform: rotate3d(1, 1, 0, 30deg);
  box-shadow: rgba(5, 71, 17, 0.3) 30px 50px 25px -40px, rgba(5, 71, 17, 0.1) 0px 25px 30px 0px;
}

.parent:hover .card .bottom .social-buttons-container .social-button {
  transform: translate3d(0, 0, 50px);
  box-shadow: rgba(5, 71, 17, 0.2) -5px 20px 10px 0px;
}

.parent:hover .card .logo .circle2 {
  transform: translate3d(0, 0, 60px);
}

.parent:hover .card .logo .circle3 {
  transform: translate3d(0, 0, 80px);
}

.parent:hover .card .logo .circle4 {
  transform: translate3d(0, 0, 100px);
}

Sekarang kamu bisa mengarahkan kursor ke kartu.

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Tulis kode HTML di sini -->
        <script src="script.js"></script>
    </body>
</html>

Semua pelajaran di Kartu 3D | Proyek Front-end

Latihan sendiri: Playground Web