Comment utiliser l'effet CSS flip (exemple de code)

Dans la conception Web, l'effet flip est un effet très courant, qui peut ajouter une sensation tridimensionnelle et dynamique à la page Web, et le code de l'effet flip CSS peut obtenir cet effet très facilement.

Ce qui suit explique comment utiliser le code d'effet CSS flip.

1. Utilisez l'attribut transform pour obtenir l'effet flip

L'utilisation de l'attribut transform est un moyen relativement simple d'obtenir l'effet flip. Différents effets de retournement peuvent être définis via plusieurs valeurs.

Par exemple, en définissant transform:rotateX(180deg), vous pouvez obtenir un retournement de 180 degrés le long de l'axe X, et en définissant transform:rotateY(180deg), vous pouvez obtenir un retournement de 180 degrés le long de l'axe Y. axe. Il convient de noter que les fonctionnalités d'animation CSS3 doivent être prises en charge dans le navigateur.

2. Utilisez l'animation CSS3 pour obtenir un effet de retournement

En plus d'utiliser l'attribut transform, les fonctionnalités d'animation fournies par CSS3 peuvent également obtenir des effets de retournement. Parmi eux, grâce à la fonction d'animation, différentes images peuvent être utilisées pour obtenir différents effets. En définissant le temps d'animation, la vitesse et d'autres paramètres, vous pouvez obtenir de nombreux types différents d'effets de retournement dynamiques.

Par exemple, vous pouvez utiliser le code suivant pour obtenir l'effet de retournement gauche et droit :

.flip-container {
  perspective: 1000px;
  position: relative;
}
 
.flipper {
  position: absolute;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
 
.front, .back {
  position: absolute;
  top: 0;
  left: 0;
}
 
.front {
  z-index: 2;
  transform: rotateY(0deg);
}
 
.back {
  transform: rotateY(180deg);
}
 
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}

3. Utilisez la transition CSS3 pour obtenir l'effet de retournement

Vous pouvez également utiliser l'effet de transition CSS3 pour obtenir l'effet de retournement. Contrairement aux fonctionnalités d'animation, les effets de transition définissent l'état initial et l'état final, puis passent automatiquement à l'état final. Différents effets de retournement peuvent être obtenus en définissant des paramètres tels que le temps de transition et les effets.

Par exemple, vous pouvez utiliser le code suivant pour obtenir un effet de retournement de haut en bas :

.box {
  position:relative;
  width:160px;
  height:200px;
}
.box .front,
.box .back {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  -webkit-transition:all 0.5s ease-in-out;
          transition:all 0.5s ease-in-out;
}
.box .front {
  background:rgba(255, 192, 203, 0.8);
  z-index:2;
}
.box .back {
  -webkit-transform:rotateX(-180deg);
          transform:rotateX(-180deg);
  background:rgba(143, 188, 143, 0.8);
  z-index:1;
}
.box:hover .front {
  -webkit-transform:rotateX(180deg);
          transform:rotateX(180deg);
  z-index:1;
}
.box:hover .back {
  -webkit-transform:rotateX(0deg);
          transform:rotateX(0deg);
  z-index:2;
}

Résumé :

L'effet de retournement CSS est un effet de conception Web très pratique qui peut ajouter plus de tridimensionnalité et de dynamique à la page Web. En utilisant l'attribut transform, l'animation CSS3 et les propriétés de transition, vous pouvez facilement obtenir différents types d'effets de retournement, enrichissant ainsi l'expressivité et les effets visuels de la conception Web.

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!