Carte Flip 3D

Il s’agit d’un composant d’interface utilisateur de carte à rabat qui a pour effet de tourner dans l’espace 3D. Le survol retourne la carte pour révéler le contenu au dos.

Aperçu

Front Side

Hover me to flip

Back Side

This is the back of the card

##Code

<div class="flip-card-container">
<div class="flip-card">
  <div class="flip-card-front">
    <div class="card-content">
      <h3>Front Side</h3>
      <p>Hover me to flip</p>
    </div>
  </div>
  <div class="flip-card-back">
    <div class="card-content">
      <h3>Back Side</h3>
      <p>This is the back of the card</p>
    </div>
  </div>
</div>
</div>

.flip-card-container {
/* Définir la profondeur de l'espace 3D */
perspective: 1000px;
width: 300px;
height: 400px;
}

.flip-card {
width: 100%;
height: 100%;
position: relative;
/* Animation de rotation fluide */
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
/* Appliquer la transformation 3D aux éléments enfants */
transform-style: preserve-3d;
cursor: pointer;
}

/* Rotation de 180 degrés autour de l'axe Y en survol */
.flip-card-container:hover .flip-card {
transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
width: 100%;
height: 100%;
position: absolute;
/* Hide element when flipped */
backface-visibility: hidden;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 2rem;
background: white;
color: #333;
}

/* Rotate back element 180 degrees initially */
.flip-card-back {
transform: rotateY(180deg);
background: linear-gradient(135deg, #6366f1, #a855f7);
color: white;
}

.card-content h3 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}

.card-content p {
margin: 0;
font-size: 1rem;
opacity: 0.9;
}