Effetto al passaggio del mouse - I

Lezione 30 di 31 del corso Card 3D | Progetto front-end di Coddy.

Questo codice serve a creare un effetto al passaggio del mouse sugli elementi con la classe "card" che si trovano all'interno di un elemento con la classe "parent". Quando passi il mouse sopra l'elemento genitore, la scheda ruoterà leggermente e verranno applicati alcuni effetti ombra e trasformazioni a diverse parti della scheda:

La scheda stessa ruoterà leggermente, di 30 gradi, attorno a un asse definito da (1, 1, 0).
Alla scheda verrà applicato un effetto box-shadow per darle un aspetto sollevato.
I pulsanti social nella sezione inferiore della scheda si sposteranno verso l'alto di 50 pixel e riceveranno un effetto ombra.
Il secondo cerchio del logo si sposterà verso l'alto di 60 pixel.
Il terzo cerchio del logo si sposterà verso l'alto di 80 pixel.
Il quarto cerchio del logo si sposterà verso l'alto di 100 pixel.

Sfida

Facile

Usa questo codice: (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);
}

Ora puoi passare il puntatore sopra la scheda.

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Scrivi il codice HTML qui -->
        <script src="script.js"></script>
    </body>
</html>

Tutte le lezioni di Card 3D | Progetto front-end

Esercitati da solo: Playground Web