Comment faire pivoter une carte CSS 3D en survol en utilisant uniquement CSS ?

Effet de carte 3D rabattable CSS en survol

Dans ce tutoriel, nous visons à obtenir un effet de retournement de carte 3D en utilisant uniquement CSS. La carte pivotera en douceur de sa face avant à sa face arrière lorsque vous la survolerez.

Mise en œuvre du code :

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

1. Nous commençons par définir une classe de conteneur .card avec la hauteur, la largeur et la perspective souhaitées.
2. À l'intérieur du conteneur .card, nous créons deux éléments enfants : .front et .back pour représenter les faces avant et arrière de la carte.
3. Nous positionnons à la fois .front et .back absolument dans le conteneur .card et définissons leurs dimensions à 100 % de largeur et de hauteur.
4. Nous appliquons une transition vers la propriété transform des deux éléments pour permettre une rotation fluide en survol.
5. Pour éviter le scintillement pendant l'animation de retournement, nous définissons la visibilité arrière sur caché et le style de transformation pour préserver la 3d.
6. Initialement, la face arrière est tournée le long de l'axe Y de 180 degrés en utilisant transform: rotateY(180deg);.
7. En survol, nous faisons pivoter la face avant de 180 degrés et la face arrière de 360 ​​degrés pour terminer le retourner.

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!