Comment créer : Boîte de flip 3D

Apprenez à créer une boîte de flip avec CSS.

Comment créer une boîte de flip

Étape 1 - Ajouter HTML :

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Face avant</h2>
    </div>
    <div class="flip-box-back">
      <h2>Côté Arrière</h2>
    </div>
  </div>
</div>

Deuxième étape - Ajouter CSS :

/* Conteneur de boîte à couvercle - Définir la largeur et la hauteur souhaitées. Nous avons ajouté la propriété border pour illustrer, lorsque le curseur de la souris est sur le conteneur de la boîte à bascule, le flip sort du conteneur (supprimez perspective si vous ne souhaitez pas d'effet 3D) */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Si vous ne souhaitez pas d'effet 3D, supprimez cette ligne */
}
/* Ce conteneur est utilisé pour positionner le côté avant et le côté arrière */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* Lorsque le curseur de la souris est déplacé sur le conteneur de la boîte à bascule, effectuer un flip horizontal */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}
/* Positionner le côté avant et le côté arrière */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* Définir le style du côté avant */
.flip-box-front {
  background-color: #bbb;
  color: black;
}
/* Définir le style du côté arrière */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

Essayez-le vous-même

Flip vertical

Pour effectuer un flip vertical plutôt qu'un flip horizontal, utilisez rotateX Méthode au lieu de rotateY：

Exemple

.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}
.flip-box-back {
  transform: rotateX(180deg);
}

Essayez-le vous-même

Attention :Ces exemples peuvent ne pas fonctionner correctement sur les tablettes et/ou les téléphones portables.

Pages connexes

Tutoriel :Transformation 2D CSS

Tutoriel :Transformation 3D CSS