effet de retournement CSS3

L'effet de retournement CSS3 est un effet courant dans la conception Web. Il peut retourner des éléments Web d'avant en arrière ou d'arrière en avant, créant un effet tridimensionnel et améliorant l'expérience utilisateur. Cet article présentera en détail la méthode d'implémentation et le code associé de l'effet flip CSS3.

1. Bases du retournement CSS3

La déformation 3D en CSS3 est obtenue grâce à l'attribut transform. Il existe deux attributs couramment utilisés : rotateX et rotateY, qui sont utilisés avec Rotate. autour des axes X et Y. En utilisant ces deux attributs, vous pouvez facilement obtenir l'effet flip de l'élément, comme le montre l'exemple suivant :

.flip-box {
  perspective: 1000px;
}
.flip-box-inner { 
  position: relative; 
  width: 100%; 
  height: 100%; 
  transition: transform 0.6s; 
  transform-style: preserve-3d; 
}
.flip-box-front, .flip-box-back { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  backface-visibility: hidden; 
}
.flip-box-front { 
  background-color: #bbb; 
  color: black; 
}
.flip-box-back { 
  background-color: #2980b9; 
  color: white; 
  transform: rotateY(180deg); 
}
.flip-box:hover .flip-box-inner { 
  transform: rotateY(180deg); 
}

Le code ci-dessus implémente un simple effet flip, qui est déclenché en survolant le .flip -élément box. -La transformation rotateY de l'élément interne réalise l'effet de retournement de l'élément. Il convient de noter que la distance d'observation est définie via l'attribut perspective et que l'attribut transform-style est défini sur préservation-3d pour garantir la présentation correcte de l'espace tridimensionnel.

2. Animation de retournement CSS3

En plus de l'effet de retournement de base, CSS3 fournit également plus de fonctions de déformation, qui peuvent montrer des effets plus vifs grâce à l'animation. Voici quelques codes d'implémentation d'animation flip CSS3 couramment utilisés :

1. 3D box flip animation

.flip {
  transition: transform 0.5s;
  transform-style: preserve-3d;
}
.flip:hover {
  transform: rotate3d(0,1,0,180deg);
}

Grâce à la fonction rotate3d en CSS3, vous pouvez réalisé le long de l'effet de n'importe quelle rotation d'axe, 180 degrés représente ici le degré de retournement. Lorsque la souris survole l'élément .flip, l'effet d'affichage de l'animation est déclenché.

2. Animation de retournement de menu en trois dimensions en 3D

.flip-menu {
  perspective: 800px;
}
.flip-menu > li {
  position: relative;
  display: inline-block;
  margin: 0 10px;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}
.flip-menu > li > a {
  display: block;
  position: relative;
  color: #fff;
  text-decoration: none;
  background: #3498db;
  padding: 10px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.flip-menu > li:hover {
  transform: rotateY(-180deg);
}
.flip-menu > li > a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 100px rgba(0,0,0,0.2);
  transform: rotateY(180deg);
  transition: transform 0.5s;
}
.flip-menu > li:hover > a:before {
  transform: rotateY(0deg);
}

Le code ci-dessus implémente une animation de retournement de menu en trois dimensions en 3D, déclenchant le menu inversé la transformation flip via hover , et en même temps, l'effet d'affichage à l'arrière du menu est obtenu via le pseudo-élément before.

3. Résumé

L'effet flip CSS3 est l'un des effets largement utilisés dans la conception Web. Il utilise la fonction de déformation de l'attribut de transformation et la distance d'observation en trois dimensions. Espace et autres attributs, obtenant l'effet de retournement le long de l'axe X et de l'axe Y. Dans le développement réel, les attributs d'animation CSS3 et les pseudo-éléments peuvent être utilisés pour afficher davantage des effets vifs et tridimensionnels, offrant ainsi une meilleure expérience visuelle aux utilisateurs.

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!