Flip Card

Una flip-card usando solo CSS… ¯\(ツ)/¯

Lee los comentarios

No olvides revisar los comentarios /* como este */ para entender cómo modificar el estilo.

Flip Card Preview

Front

Back

HTML

flip-card.html

<div class="card">
  <div class="inner">
    <div class="front">Este es el frente</div>
    <div class="back">Este es el reverso</div>
  </div>
</div>

CSS

style.css

.card {
  width: 20rem;
  height: 13rem;
  perspective: 1000px;  /* Importante para el efecto de giro 3D */
  --duration: 600ms;   /* Duración del efecto de giro 3D */
  /* Fondo de la parte frontal (gradiente de ejemplo) */
  --f: linear-gradient(in oklch to right, #14b8a6, #0891b2, #1d4ed8);
  /* Fondo de la parte trasera (gradiente de ejemplo) */
  --b: linear-gradient(in oklch to right, #c084fc, #8b5cf6, #4f46e5);
}

.inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform var(--duration);
  text-align: center;
  border-radius: 0.5rem;
}

.card:hover .inner {
  transform: rotateY(180deg); /* Rotación al hacer hover */
}

.front, .back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  border-radius: 0.5rem;
  align-content: center;
  text-align: center;
}

.front {
  background: var(--f); /* Fondo de ejemplo */
}

.back {
  transform: rotateY(180deg); /* Rotación inicial de la parte trasera */
  background: var(--b); /* Fondo de ejemplo */
}

Modifica las propiedades personalizadas

• Cambiar colores: Ajusta los valores de las variables --f y --b para los colores de fondo del frente y reverso.
• Modificar la duración de la animación: Cambia --duration para controlar la velocidad de giro.
• Dimensiones: Modifica width y height en .card para cambiar el tamaño de la tarjeta.

Modificar variables CSS desde HTML

Las variables CSS se pueden modificar directamente en el HTML como se muestra a continuación:

<div class="card" style="--f: #c084fc; --b: #14b8a6; --duration: 600ms;">
  ...
</div>

Fin.