Cómo crear: tarjeta desplegable

Cómo crear una tarjeta desplegable

Paso 1 - Añadir 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>Arquitecto & Ingeniero</p>
      <p>Nos encanta ese tipo</p>
    </div>
  </div>
</div>

Segundo paso - Añadir CSS:

/* Contenedor de la tarjeta giratoria - establezca el ancho y alto que desee. Hemos agregado la propiedad border para mostrar que la transición de giro sobrepasa el contenedor al pasar el ratón (si no desea el efecto 3D, elimine la perspectiva) */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Si no desea el efecto 3D, elimínelo */
}
/* Este contenedor se utiliza para posicionar frontal y trasero */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* Al pasar el ratón sobre el contenedor de la tarjeta giratoria, realizar un giro horizontal */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
/* Posicionar frontal y trasero */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* Establecer estilos de la parte frontal (si la imagen falta, usar este estilo de reserva) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}
/* Establecer estilos de la parte trasera */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

亲自试一试