Cubo 3D

Un cubo 3D usando solo CSS… ¯\(ツ)/¯

Lee los comentarios

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

3D Cube Preview

front

back

right

left

top

bottom

HTML

cube.html

<div class="cube-container">
  <div class="cube">
    <div class="front">front</div>
    <div class="back">back</div>
    <div class="right">right</div>
    <div class="left">left</div>
    <div class="top">top</div>
    <div class="bottom">bottom</div>
  </div>
</div>

CSS

style.css

.cube-container {
  perspective: 500px; /* Importante para la corrección de la perspectiva */
}

.cube {
  width: 12rem;
  height: 12rem;
  --z: 6rem; /* Distancia entre el centro y las caras del cubo */
  --duration: 10s;
  aspect-ratio: 1 / 1;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate var(--duration, 10s) infinite linear;
  > * {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: /* Configuración de rotación y traslación */
      rotateY(var(--y, 0deg)) rotateX(var(--x, 0deg))
      translateZ(var(--z));
    backface-visibility: visible; /* visible | hidden */

    align-content: center;
    text-align: center;
    text-transform: uppercase;
    background: linear-gradient(in oklch to bottom left, #84cc1670, #22c55e70, #16a34a70);
    border: 1px solid hsla(72, 86%, 51%, 0.8);
  }
}

.front  { --y: 0deg;   }
.back   { --y: 180deg; }
.left   { --y: 90deg;  }
.right  { --y: -90deg; }
.top    { --x: 90deg;  }
.bottom { --x: -90deg; }

@keyframes rotate {
  from { transform: rotateX(0deg) rotateY(0deg) }
  to { transform: rotateX(360deg) rotateY(360deg) }
}

Modificaciones y propiedades personalizadas

• Configuración de la perspectiva: Asegúrate de que el contenedor principal (.cube-container) tenga la propiedad perspective. Este valor define la distancia desde la cual se observa el cubo, afectando su efecto 3D. Puedes ajustar perspective: 500px o probar otros valores para intensificar o reducir el efecto.

• Dimensiones del cubo: Cambia width y height en .cube para ajustar el tamaño. Estas propiedades deben ser iguales para conservar la forma cúbica.

• Distancia de las caras (--z): La variable --z controla la separación entre el centro del cubo y cada cara (debe ser la mitad del tamaño del cubo). Por ejemplo, si el cubo mide 12rem, entonces --z debe ser 6rem. Ajusta este valor para personalizar la distancia de las caras desde el centro.

• Velocidad de la animación: Cambia --duration para controlar la velocidad de rotación en la animación. Por ejemplo, --duration: 15s hace que la animación sea más lenta.

Cambiar variables desde HTML

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

<div class="cube-container" style="--z: 4rem; --duration: 15s;">
  ...
</div>

Fin.