Hovering Effect - I

Lição 30 de 31 do curso 3D Card | Front-end Project da Coddy.

Este código é para um efeito de hover em elementos com a classe "card" que estão dentro de um elemento com a classe "parent". Quando você passa o mouse sobre o elemento pai, o card girará levemente, e haverá alguns efeitos de sombra e translações aplicados a diferentes partes do card:

O próprio card girará levemente, em 30 graus, em torno de um eixo definido por (1, 1, 0).
O card receberá um efeito box-shadow para dar uma aparência elevada.
Os botões sociais dentro da seção inferior do card se moverão para cima em 50 pixels e receberão um efeito de sombra.
O segundo círculo do logotipo se moverá para cima em 60 pixels.
O terceiro círculo do logotipo se moverá para cima em 80 pixels.
O quarto círculo do logotipo se moverá para cima em 100 pixels.

Desafio

Fácil

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

Agora você pode passar o mouse sobre o cartão.

Experimente você mesmo

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

Hovering Effect - I

Todas as lições de 3D Card | Front-end Project