Efecto hover - I

Lección 30 de 31 del curso Tarjeta 3D | Proyecto Front-end de Coddy.

Este código es para un efecto de hover en elementos con la clase "card" que están dentro de un elemento con la clase "parent". Cuando pasas el cursor sobre el elemento padre, la tarjeta rotará ligeramente y se aplicarán algunos efectos de sombra y traslaciones a diferentes partes de la tarjeta:

La tarjeta en sí rotará ligeramente, 30 grados, alrededor de un eje definido por (1, 1, 0).
La tarjeta obtendrá un efecto de box-shadow para darle una apariencia elevada.
Los botones sociales dentro de la sección inferior de la tarjeta se moverán hacia arriba 50 píxeles y obtendrán un efecto de sombra.
El segundo círculo del logo se moverá hacia arriba 60 píxeles.
El tercer círculo del logo se moverá hacia arriba 80 píxeles.
El cuarto círculo del logo se moverá hacia arriba 100 píxeles.

Desafío

Fácil

Usa este código: (Importante)

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

Ahora puedes pasar el cursor sobre la tarjeta.

Pruébalo tú mismo

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

Efecto hover - I

Todas las lecciones de Tarjeta 3D | Proyecto Front-end