Hover-Effekt - I

Lektion 30 von 31 im Kurs 3D-Karte | Front-end-Projekt von Coddy.

Dieser Code ist für einen Hover-Effekt auf Elementen mit der Klasse "card", die sich innerhalb eines Elements mit der Klasse "parent" befinden. Wenn Sie mit der Maus über das übergeordnete Element fahren, dreht sich die Karte leicht, und es werden einige Schatteneffekte und Verschiebungen auf verschiedene Teile der Karte angewendet:

Die Karte selbst dreht sich leicht um 30 Grad um eine durch (1, 1, 0) definierte Achse.
Die Karte erhält einen box-shadow-Effekt, um ihr ein abgehobenes Aussehen zu verleihen.
Die Social-Buttons im unteren Bereich der Karte bewegen sich um 50 Pixel nach oben und erhalten einen Schatteneffekt.
Der zweite Kreis des Logos bewegt sich um 60 Pixel nach oben.
Der dritte Kreis des Logos bewegt sich um 80 Pixel nach oben.
Der vierte Kreis des Logos bewegt sich um 100 Pixel nach oben.

Aufgabe

Einfach

Verwende diesen Code: (Wichtig)

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

Jetzt kannst du über die Karte hovern.

Probier es selbst

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

Hover-Effekt - I

Alle Lektionen in 3D-Karte | Front-end-Projekt