Dans cet article, nous apprendrons comment créer une animation de carte à retourner 3D élégante en utilisant HTML et CSS avec des arrière-plans dégradés.

Visitez mon site Web

Comprendre la structure

Nous utiliserons deux faces pour la carte – recto et verso – pour créer un effet de retournement. Cet effet sera activé au survol, à l'aide de transitions CSS.

    

      
Front Side
    
    

      
Back Side
    

Cette structure HTML simple contient un élément div avec deux côtés : un pour le recto et un pour le verso.

.card {
    perspective: 150rem;
    position: relative;
    height: 40rem;
    max-width: 400px;
    margin: 2rem;
    box-shadow: none;
    background: none;
  }

.card-side {
    height: 35rem;
    border-radius: 15px;
    transition: all 0.8s ease;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    padding: 2rem;
    color: white;
}

.card-side.back {
    transform: rotateY(-180deg);
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%,#FFCC70 100%);
}

.card-side.front {
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

.card:hover .card-side.front {
    transform: rotateY(180deg);
}

.card:hover .card-side.back {
    transform: rotateY(0deg);
}

Démo en direct

backface-visibility : masque le contenu au dos de la carte lorsque le recto est visible, et vice versa.

définissez rotateY() pour le verso de la carte sur -180deg et le recto sur 0deg.

perspective : ajoute de la profondeur à l'effet 3D en permettant à la carte d'apparaître comme si elle se retournait dans l'espace.

Lors du survol, définissez rotateY() pour le recto sur 180deg et le verso sur 0deg.

Conclusion

Avec seulement quelques lignes de HTML et CSS, vous pouvez créer une superbe animation de carte à retourner en 3D qui ajoute une touche dynamique à votre site Web. Essayez d'expérimenter avec les couleurs et les effets pour le rendre unique