Tarjeta 3D Giratoria

Este es un componente de interfaz de usuario de tarjeta invertida que tiene el efecto de girar en un espacio 3D. Al pasar el cursor, se voltea la tarjeta para revelar el contenido del reverso.

Vista previa

Front Side

Hover me to flip

Back Side

This is the back of the card

Código

<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 {
/* Establecer la profundidad del espacio 3D */
perspective: 1000px;
width: 300px;
height: 400px;
}

.flip-card {
width: 100%;
height: 100%;
position: relative;
/* Animación de rotación suave */
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
/* Aplicar transformación 3D a elementos secundarios */
transform-style: preserve-3d;
cursor: pointer;
}

/* Gira 180 grados alrededor del eje Y al pasar el mouse */
.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;
}