"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Page de garde > La programmation > Comment créer une animation de carte à retourner en utilisant HTML et CSS

Comment créer une animation de carte à retourner en utilisant HTML et CSS

Publié le 2024-11-08
Parcourir:546

How to Create Flip Card Animation Using HTML and CSS

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

Déclaration de sortie Cet article est reproduit sur : https://dev.to/kaja_uvais_a8691e947dd399/how-to-create-3d-flip-card-animation-using-html-and-css-2fgb?1 En cas d'infraction, veuillez contacter study_golang @163.com supprimer
Dernier tutoriel Plus>

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3