Comment obtenir un effet de retournement de carte 3D en utilisant uniquement CSS ?

Comment retourner une carte 3D avec CSS

La tâche consiste à créer un effet de retournement de carte 3D en utilisant uniquement CSS, où la carte se retourne verticalement en survol.

Effet de retournement CSS uniquement

Pour simplifier la mise en œuvre, nous utiliserons le code CSS suivant :

<code class="css">.card {
  position: relative;
  width: 50vh;
  height: 80vh;
  perspective: 500px;
  margin: 10vh auto 50vh;
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.front {
  background-color: #66ccff;
}

.back {
  background-color: #dd8800;
  transform: rotateY(180deg);
}

.card:hover .front {
  transform: rotateY(180deg);
}

.card:hover .back {
  transform: rotateY(360deg);
}</code>

Explication

Le conteneur de cartes est doté d'une perspective qui lui donne l'illusion d'un espace 3D. Les faces avant et arrière sont positionnées de manière absolue à l'intérieur du conteneur. Elles sont également transformées pour masquer leurs faces arrière et préserver leur nature 3D.

Lorsque la souris survole la carte, les transformations suivantes se produisent :

• La face avant pivote de 180 degrés autour l'axe Y, révélant la face arrière.
• La face arrière pivote de 360 ​​degrés autour de l'axe Y, complétant le retournement.

Cette technique CSS uniquement permet un rendu fluide et réaliste Effet de retournement de carte 3D en survol.

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!