Comment obtenir un retournement de carte 3D fluide avec Pure CSS : dépannage des problèmes de capture

Retourner une carte 3D avec Pure CSS

Problème :

Tentative de créer un effet de retournement de carte 3D à l'aide de CSS, mais la carte se claque au lieu de se retourner doucement au survol.

Tentative de code :

<code class="css">.card-container {
  // CSS code...
}</code>

Solution :

Pour obtenir une animation de retournement de carte 3D impeccable avec uniquement du CSS, rationalisez votre code et faites pivoter la carte autour de l'axe Y. Voici un exemple optimisé :

CSS :

<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>

HTML :

<code class="html"><div class="card">
  <div class="front"><span>Front</span></div>
  <div class="back"><span>Back</span></div>
</div></code>

Comment ça Travaux :

• Le style de transformation : préserver-3d ; La propriété garantit que les éléments de la carte sont préservés dans l'espace 3D.
• visibilité de la face arrière : cachée ; masque le verso de la carte lorsqu'elle est retournée.
• La propriété rotateY() retourne la carte autour de l'axe Y, créant l'effet de retournement.
• transition : transformer 1s ; introduit une transition en douceur pendant l'animation de retournement.

Résultat :

Cet extrait de code fournit une animation de retournement de carte 3D transparente en utilisant du CSS pur. La carte tourne en douceur de la face avant à la face arrière 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!