Comment créer : carte flip

Comment créer une carte flip

Première étape - Ajouter HTML :

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>Bill Gates</h1>
      <p>Architecte & Ingénieur</p>
      <p>Nous aimons ce gars-là</p>
    </div>
  </div>
</div>

Deuxième étape - Ajouter CSS :

/* Conteneur de la carte pivotante - définir la largeur et la hauteur souhaitées. Nous avons ajouté la propriété border pour démontrer que le flip dépasse le conteneur lors du hover (supprimez la perspective si vous ne voulez pas d'effet 3D) */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Si vous ne voulez pas d'effet 3D, supprimez cette perspective */
{}
/* Ce conteneur est utilisé pour positionner le côté avant et le côté arrière */
.flip-card-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 sur le conteneur de la carte pivotante, effectuer un flip horizontal */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
{}
/* Positionner le côté avant et le côté arrière */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
{}
/* Définir les styles du côté avant (si l'image manque, utilisez cette alternative) */
.flip-card-front {
  background-color: #bbb;
  color: black;
{}
/* Définir les styles du côté arrière */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
{}

Try it yourself