Efekt najechania kursorem - I

Lekcja 30 z 31 w kursie Karta 3D | Projekt front-endowy w Coddy.

Ten kod odpowiada za efekt najechania kursorem na elementy z klasą "card", które znajdują się wewnątrz elementu z klasą "parent". Gdy najedziesz kursorem na element nadrzędny, karta lekko się obróci, a do różnych jej części zostaną zastosowane efekty cienia i przesunięcia:

Sama karta lekko się obróci o 30 stopni wokół osi określonej przez (1, 1, 0).
Do karty zostanie dodany efekt box-shadow, aby sprawiała wrażenie uniesionej.
Przyciski społecznościowe w dolnej sekcji karty przesuną się w górę o 50 pikseli i uzyskają efekt cienia.
Drugi okrąg logo przesunie się w górę o 60 pikseli.
Trzeci okrąg logo przesunie się w górę o 80 pikseli.
Czwarty okrąg logo przesunie się w górę o 100 pikseli.

Wyzwanie

Łatwy

Użyj tego kodu: (Important)

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

Teraz możesz najechać kursorem na kartę.

Spróbuj swoich sił

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Wpisz tutaj kod HTML -->
        <script src="script.js"></script>
    </body>
</html>

Wszystkie lekcje w sekcji Karta 3D | Projekt front-endowy

Poćwicz samodzielnie: Edytor online Web