Comment obtenir un effet flip en CSS3

L'effet flip est l'un des effets les plus utilisés dans la conception Web moderne. Il peut être utilisé dans divers scénarios, tels que l'affichage de produits, la création d'animations et l'ajout de divertissements au site Web. Dans le passé, pour obtenir cet effet, il fallait généralement utiliser JavaScript pour manipuler les éléments du DOM. Cependant, nous pouvons désormais utiliser les nouvelles fonctionnalités de CSS3 pour obtenir cet effet.

CSS3 fournit de nouvelles propriétés de transformation, qui permettent aux développeurs d'obtenir facilement l'effet de retournement des éléments. Voici quelques attributs couramment utilisés :

1. transform-style:preserve-3d;

Cet attribut peut transformer les éléments enfants d'un élément en un espace tridimensionnel. Cet attribut est nécessaire si vous souhaitez obtenir un effet flip. Sipreserve-3d n'est pas défini, seul l'élément lui-même sera inversé, tandis que les éléments enfants seront affaiblis ou perdront leur effet.

2. transform-origin: 50% 50%;

Cet attribut peut définir le point central du processus de retournement. Par défaut, le point central est au centre de l'élément. Vous pouvez changer la position du point central en modifiant la valeur de cette propriété. Cette propriété est utile dans les effets flip. Par exemple, si vous souhaitez que l'élément bascule vers la droite, le point central peut être placé vers la gauche.

3. perspective : 1000px ;

Cet attribut peut définir la distance entre l'observateur et l'élément, qui est la distance de perspective. La distance de perspective affecte l’effet du retournement. Par défaut, la distance de perspective est de 0 et l'élément est aplati. En retournement, plus la distance de perspective est grande, meilleur est l'effet de retournement.

4. transform: rotateY(180deg);

Cet attribut peut définir le degré de rotation de l'axe Y de l'élément. Lorsque la valeur est positive, l'élément est inversé vers la droite ; lorsque la valeur est négative, il est inversé vers la gauche.

Les attributs ci-dessus peuvent être utilisés en combinaison pour obtenir différents effets de retournement.

Par exemple, nous pouvons définir le style suivant pour l'élément afin d'obtenir un effet de retournement de base :

.flip-container {
  perspective: 1000px;
}

.flip-container:hover .flipper{
  transform: rotateY(180deg);
}

.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.front {
  z-index: 2;
}

.back {
  transform: rotateY(180deg);
}

En utilisant le style CSS ci-dessus, vous pouvez retourner un élément à 180 degrés et afficher le contenu des deux côtés.

Grâce à la puissante fonctionnalité de transformation de CSS3, les développeurs Web peuvent facilement créer des effets de retournement fluides, vifs et interactifs, rendant la conception des pages Web plus colorée.

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!