Effet de survol - I

Leçon 30 sur 31 du cours Carte 3D | Projet Front-end de Coddy.

Ce code concerne un effet de survol sur les éléments ayant la classe "card" qui se trouvent à l'intérieur d'un élément ayant la classe "parent". Lorsque vous survolez l'élément parent, la carte pivotera légèrement, et des effets d'ombre et des translations seront appliqués à différentes parties de la carte :

La carte elle-même pivotera légèrement, de 30 degrés, autour d'un axe défini par (1, 1, 0).
La carte recevra un effet box-shadow pour lui donner un aspect surélevé.
Les boutons sociaux à l'intérieur de la section inférieure de la carte se déplaceront vers le haut de 50 pixels et recevront un effet d'ombre.
Le deuxième cercle du logo se déplacera vers le haut de 60 pixels.
Le troisième cercle du logo se déplacera vers le haut de 80 pixels.
Le quatrième cercle du logo se déplacera vers le haut de 100 pixels.

Défi

Facile

Utilisez ce code : (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);
}

Maintenant, vous pouvez survoler la carte.

Essayez vous-même

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

Effet de survol - I

Toutes les leçons de Carte 3D | Projet Front-end