Cómo crear: Caja giratoria 3D

Aprenda a crear una caja giratoria usando CSS.

Cómo crear una caja giratoria

Primero - Añadir HTML：

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Front Side</h2>
    </div>
    <div class="flip-box-back">
      <h2>Lado posterior</h2>
    </div>
  </div>
</div>

Segundo paso - Añadir CSS:

/* Contenedor de la caja cubierta - Establecer el ancho y la altura que desee. Hemos agregado la propiedad border para demostrar que cuando el ratón se mantiene sobre el contenedor, la cubierta sobrepasa el contenedor (si no desea efecto 3D, elimine perspective) */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Si no se necesita efecto 3D, elimine esta línea */
}
/* Este contenedor se utiliza para posicionar la parte frontal y la parte posterior */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* Cuando el ratón se mueve sobre el contenedor de la caja giratoria, realizar un giro horizontal */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}
/* Posicionar la parte frontal y la parte posterior */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* Establecer el estilo de la parte frontal */
.flip-box-front {
  background-color: #bbb;
  color: black;
}
/* Establecer el estilo de la parte posterior */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

Prueba personalmente

Giro vertical

Para realizar un giro vertical en lugar de horizontal, utilice rotateX Método en lugar de rotateY：

Ejemplo

.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}
.flip-box-back {
  transform: rotateX(180deg);
}

Prueba personalmente

Atención:Estos ejemplos pueden no funcionar correctamente en tabletas y/u phones.

Páginas relacionadas

Tutoriales:Transformación 2D de CSS

Tutoriales:Transformación 3D de CSS