Comment utiliser CSS pour obtenir un effet de retournement d'image

Dans la conception et le développement de sites Web modernes, l'effet de retournement d'image est devenu un élément de conception très populaire et courant. Grâce à cet effet, les utilisateurs peuvent ressentir la vitalité et la dynamique du site de manière plus intuitive. Dans cet article, nous nous concentrerons sur la façon d'utiliser CSS pour obtenir cet effet de retournement d'image.

Tout d'abord, nous devons préciser que CSS3 propose deux façons d'obtenir l'effet de retournement d'image. Ils utilisent respectivement la transformation 2D et la transformation 3D.

La transformation 2D fait référence à la rotation d'un élément d'un certain angle le long de l'axe x ou de l'axe y pour lui donner un effet de retournement bidimensionnel. La transformation 3D est basée sur la 2D et ajoute une rotation le long de l'axe z, donnant à l'élément un effet de retournement tridimensionnel.

Jetons d'abord un coup d'œil au code qui utilise la transformation 2D pour retourner l'image. Tout d'abord, nous devons définir un élément image en HTML et utiliser CSS pour définir sa taille et sa position dans la page Web :

<div class="flip-container">
  <div class="flipper">
    <img src="image.jpg" alt="Image">
  </div>
</div>

.flip-container {
  width: 200px;
  height: 200px;
  perspective: 1000px;
}
.flipper {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: all .5s ease-in-out;
}
.flipper:hover {
  transform: rotateY(180deg);
}
img {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

Comme vous pouvez le voir, nous définissons d'abord un élément .flip-container et définissons sa largeur et sa hauteur, et utilisez l'attribut perspective pour définir la perspective. Il s'agit d'une propriété obligatoire pour les transformations 3D.

Ensuite, nous définissons un élément .flipper et définissons sa largeur, sa hauteur et son positionnement. Dans le même temps, nous devons également définir sa propriété transform-style sur préservation-3d pour permettre la transformation 3D. Sur cet élément, nous avons également défini une pseudo-classe :hover Lorsque la souris survole cet élément, une animation de rotation sera déclenchée pour retourner l'image.

Enfin, nous définissons un élément img, définissons sa largeur, sa hauteur et son positionnement, et masquons son arrière à l'aide de la propriété backface-visibility. En effet, lorsque l'élément est retourné, la face arrière est exposée, ce qui, s'il n'est pas masqué, affecte l'expérience globale de l'effet.

Ensuite, voyons comment utiliser la transformation 3D pour obtenir l'effet de retournement d'image. Ce processus est très similaire à la transformation 2D. Il vous suffit d'ajouter une rotation le long de l'axe z à l'élément .flipper :

<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="front-image.jpg" alt="Front Image">
    </div>
    <div class="back">
      <img src="back-image.jpg" alt="Back Image">
    </div>
  </div>
</div>

.flip-container {
  width: 200px;
  height: 200px;
  perspective: 1000px;
}
.flipper {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: all .5s ease-in-out;
}
.flipper:hover {
  transform: rotateY(180deg);
}
.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.front {
  transform: rotateY(0deg);
}
.back {
  transform: rotateY(180deg);
}

Comme vous pouvez le voir, dans ce cas, nous devons imbriquer deux sous-éléments dans le .flipper. élément .front et .back, et définissez respectivement leur contenu et leur style. Dans ce processus, nous devons également utiliser la visibilité arrière pour masquer l'arrière de l'élément.

En même temps, sur les éléments .front et .back, nous devons également définir différents attributs de rotation le long de l'axe z afin qu'ils puissent basculer sous différents angles.

En plus des deux méthodes ci-dessus, il existe d'autres moyens plus complexes d'obtenir des effets de retournement d'image, tels que l'utilisation de l'animation CSS, de JavaScript et d'autres technologies. Vous pouvez choisir la solution la plus appropriée en fonction des besoins réels.

En résumé, utiliser CSS pour obtenir un effet de retournement d'image est un moyen très simple, intuitif et facile à mettre en œuvre. En maîtrisant la transformation 2D et la transformation 3D de CSS3, vous pouvez facilement obtenir l'effet souhaité et améliorer l'effet visuel et l'expérience utilisateur du site 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!