Comment obtenir un effet de retournement d'image en CSS3

Dans la conception de sites Web, les images sont l'un des éléments indispensables. Il est souvent nécessaire d'effectuer des effets spéciaux sur les images, tels que des effets de retournement d'image. Alors, comment utiliser CSS3 pour obtenir l’effet de retournement d’image ? Cet article présentera en détail la méthode permettant d'obtenir un effet de retournement d'image dans CSS3.

1. Implémenter l'effet de retournement d'image dans CSS3

CSS3 nous offre deux façons de réaliser le retournement d'image :

1. Utilisez l'attribut transform pour retourner l'image
2. Utilisez l'attribut backface-visibility pour retourner l'image

2 .Utilisez la propriété transform pour retourner les images

La propriété transform est une nouvelle propriété en CSS3, qui peut réaliser la traduction, la mise à l'échelle, la rotation et l'inclinaison des éléments. Parmi eux, la rotation est la base pour obtenir l’effet de retournement d’image. La syntaxe de l'attribut transform est la suivante :

transform: translate(x,y) scale(x,y) rotate(deg) skewX(deg) skewY(deg);

Parmi eux, rotate(deg) est utilisé pour spécifier l'angle de rotation de l'élément. Si vous définissez une valeur positive, cela signifie une rotation dans le sens des aiguilles d'une montre ; si vous définissez une valeur négative, cela signifie une rotation dans le sens inverse des aiguilles d'une montre.

Spécifiquement pour l'effet de retournement d'image, nous devons utiliser l'attribut rotateY(deg). rotateY(deg) est utilisé pour spécifier l'angle selon lequel l'élément pivote autour de l'axe Y. Si vous définissez une valeur positive, cela signifie une rotation dans le sens des aiguilles d'une montre ; si vous définissez une valeur négative, cela signifie une rotation dans le sens inverse des aiguilles d'une montre.

Ce qui suit est un exemple de code CSS3 pour obtenir un effet de retournement d'image :

.flip-container {
  perspective: 1000px; /* 设置透视点 */
}

.flipper {
  transition: 0.6s; /* 设置过渡特效 */
  transform-style: preserve-3d; /* 开启3D环境 */
  position: relative;
}

.front,
.back {
  backface-visibility: hidden; /* 隐藏背面 */
  position: absolute;
  top: 0;
  left: 0;
}

.front {
  z-index: 2;
}

.back {
  transform: rotateY(180deg); /* 初始角度为180度 */
}

.flipper:hover .front {
  transform: rotateY(-180deg); /* 翻转角度为-180度 */
}

.flipper:hover .back {
  transform: rotateY(0deg); /* 翻转角度为0度 */
}

3. Utilisez l'attribut backface-visibility pour réaliser le retournement d'image

L'attribut backface-visibility est utilisé pour définir si le verso d'un élément est visible. La valeur par défaut est visible. Lorsque la valeur est masquée, le dos de l'élément sera masqué. Lors de l'implémentation de l'effet de retournement d'image, nous pouvons utiliser cet attribut pour contrôler l'affichage du recto et du verso de l'image.

Ce qui suit est un exemple d'utilisation de l'attribut backface-visibility pour obtenir l'effet de retournement d'image :

.flip-container {
  perspective: 1000px; /* 设置透视点 */
}

.flip-container:hover .flipper {
  transform: rotateY(180deg); /* 翻转角度为180度 */
}

.flipper {
  transition: 0.6s; /* 设置过渡特效 */
  transform-style: preserve-3d; /* 开启3D环境 */
  position: relative;
}

.front,
.back {
  backface-visibility: hidden; /* 隐藏背面 */
  position: absolute;
  top: 0;
  left: 0;
}

.front {
  z-index: 2;
}

.back {
  transform: rotateY(180deg); /* 初始角度为180度 */
}

IV. Résumé

CSS3 fournit une variété de façons d'obtenir l'effet de retournement d'image, parmi lesquelles la transformation et la visibilité de face arrière. Les attributs sont les deux méthodes les plus couramment utilisées. Leurs principes de mise en œuvre sont tous basés sur l'environnement 3D. Grâce à la démonstration de l'exemple de code ci-dessus, tout le monde peut apprendre à utiliser CSS3 pour obtenir l'effet de retournement d'image et maîtriser les idées de base d'implémentation de cet effet.

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!