Tarjeta efecto flip (CSS)

Esta tarjeta emplea un efecto 'flip' que se activa al pasar el cursor por encima o hacer clic en la tarjeta. El efecto permite ver información adicional en la parte posterior de la tarjeta, generando una transición suave entre el frente y el reverso. Ideal para presentaciones breves o destacar contenido específico. Utiliza transformaciones de CSS (transform: rotateY) junto con transiciones (transition) para lograr un cambio de 180° en el eje Y, dando una sensación de volteo. El diseño puede incluir imágenes o texto en ambas caras para adaptarse a distintos usos.

<style>
section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
}

.card {
  perspective: 1000px;
  position: relative;
  width: 500px;
  height: 300px;
  cursor: pointer;
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #CCC;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.card-front {
  background-color: #fcfcfc;
  color: #333;
}

.card-back {
  background-color: #f9f9f9;
  color: #333;
  transform: rotateY(180deg);
}

.card:hover .card-front {
  transform: rotateY(180deg);
}

.card:hover .card-back {
  transform: rotateY(0deg);
}
</style>

<section>
<div class="card">
  <div class="card-front">
    <h2>Esto es una tarjeta</h2>
  </div>
  <div class="card-back">
    <h2>Este es el reverso de la tarjeta</h2>
  </div>
</div>
</section>