Méthodes et exemples d'utilisation de CSS pour obtenir des effets de retournement de carte

Méthodes et exemples d'utilisation de CSS pour obtenir un effet de retournement de carte

Dans la conception Web moderne, l'effet de retournement est un effet spécial courant et sympa qui peut ajouter une sensation de dynamique et d'interactivité à la page Web. En utilisant les propriétés de transformation CSS et les propriétés d'animation, nous pouvons facilement obtenir l'effet de retournement de carte. Cet article présentera un effet de retournement de carte de base et fournira des exemples de code spécifiques pour référence aux lecteurs.

L'effet de retournement de carte fait référence à l'effet d'animation consistant à retourner la carte d'avant en arrière ou d'arrière en avant. Pour obtenir cet effet, nous devons utiliser les propriétés de transformation CSS et les propriétés d'animation. Les étapes spécifiques sont les suivantes :

1. Définir un élément HTML avec un style "carte". Cet élément peut être un div comportant un recto et un verso. Nous pouvons utiliser des sélecteurs de pseudo-classe CSS, tels que :hover ou :focus, pour définir l'effet de retournement à déclencher lorsque la souris est survolée ou cliquée.

<div class="card">
  <div class="front">
    <h2>正面</h2>
  </div>
  <div class="back">
    <h2>背面</h2>
  </div>
</div>

2. Utilisez la propriété transform de CSS pour faire pivoter l'arrière de 180 degrés et le masquer. Nous pouvons utiliser transform: rotateY() pour obtenir cet effet. De plus, nous pouvons également utiliser l'attribut de transition CSS pour effectuer une transition en douceur de l'effet flip.

.card {
  position: relative;
  width: 200px;
  height: 200px;
  perspective: 1000px; /*设置视角*/
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /*将背面隐藏*/
}

.back {
  transform: rotateY(180deg); /*将背面旋转180度*/
}

.card:hover .front, .card:focus .front {
  transform: rotateY(180deg); /*鼠标悬浮或点击时将正面旋转180度*/
}

.card:hover .back, .card:focus .back {
  transform: rotateY(0deg); /*鼠标悬浮或点击时将背面旋转至初始状态*/
}

Dans le code ci-dessus, nous définissons l'attribut perspective dans l'élément .card, qui définit la distance entre l'observateur et l'élément de transformation 2D, produisant un effet tridimensionnel. En définissant l'attribut rotateY de l'élément .back et l'attribut transform de l'élément .front, nous définissons respectivement les états de rotation du recto et du verso de la carte. Grâce aux sélecteurs de pseudo-classe :hover ou :focus, nous définissons les états qui déclenchent l'effet flip lorsque la souris survole et clique respectivement. En même temps, grâce à la transition de l'attribut de transition, nous obtenons un effet d'animation de transition fluide.

Ci-dessus sont les méthodes de base et des exemples d'utilisation de CSS pour obtenir l'effet de retournement de carte. En tirant parti des riches fonctionnalités de CSS, nous pouvons personnaliser davantage d'effets de retournement avec des styles riches. Les lecteurs peuvent étendre et optimiser davantage cet effet en fonction de leurs propres besoins et de leur créativité pour obtenir un effet d'interaction de page plus attrayant.

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!