Maison >interface Web >tutoriel CSS >Conseils de mise en page CSS : meilleures pratiques pour la mise en œuvre de l'effet de retournement de carte flottant
Conseils de mise en page CSS : meilleures pratiques pour la mise en œuvre de l'effet de retournement de carte flottant
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBoriginal
- 2023-10-16 09:07:411238parcourir
Conseils de mise en page CSS : meilleures pratiques pour implémenter l'effet de retournement de carte flottante
L'effet de retournement de carte flottante est un effet très courant dans la conception Web, qui peut rendre la page plus dynamique et plus vivante. Cet article explique comment utiliser CSS pour obtenir l'effet de retournement de carte flottant et donne des exemples de code spécifiques.
Avant de commencer, nous devons clarifier les principes de base du retournement de cartes flottantes. En fait, cet effet peut être obtenu en utilisant l'attribut CSS transform. L'effet flip est obtenu en divisant la carte en deux parties, recto et verso, et en les faisant pivoter séparément. Voici un exemple de code spécifique :
<html>
<head>
<style>
.card {
width: 300px;
height: 200px;
perspective: 1000px;
}
.card-inner {
width: 100%;
height: 100%;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card-front {
transform: rotateY(0deg);
background-color: #e74c3c;
}
.card-back {
transform: rotateY(180deg);
background-color: #3498db;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="card">
<div class="card-inner">
<div class="card-front">
<h2>正面</h2>
</div>
<div class="card-back">
<h2>背面</h2>
</div>
</div>
</div>
</body>
</html>Dans le code ci-dessus, nous avons créé un div nommé "card" avec une largeur de 300px et une hauteur de 200px. En définissant la propriété perspective, nous pouvons créer un effet de perspective pour rendre le retournement plus réaliste.
Ensuite, nous créons un div appelé "card-inner" qui contient le recto et le verso de la carte. En définissant la propriété transform-style surpreserve-3d, nous pouvons conserver la relation de perspective entre les faces avant et arrière. Dans le même temps, en définissant l'attribut de transition, nous pouvons obtenir une transition en douceur de l'effet flip.
Lorsque la souris survole la carte, nous pouvons obtenir l'effet de retournement de la carte en définissant le sélecteur de pseudo-classe :hover et en définissant la valeur de l'attribut transform de .card-inner sur rotateY (180deg).
Ensuite, nous avons créé deux divs, .card-front et .card-back, qui représentent respectivement le recto et le verso de la carte. En définissant la propriété backface-visibility sur caché, nous pouvons supprimer l'effet de scintillement lorsque la carte est retournée.
Dans .card-front, nous pouvons ajouter n'importe quel contenu pour afficher le recto de la carte. Dans .card-back, nous avons utilisé une couleur d'arrière-plan et un texte centré pour afficher le dos de la carte.
L'exemple de code donné ci-dessus n'est qu'une simple implémentation de l'effet de retournement de carte flottant, que vous pouvez modifier et étendre selon vos propres besoins. J'espère que l'introduction de cet article pourra vous aider à mieux maîtriser les compétences de mise en page CSS et à obtenir des effets plus intéressants.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!