HTML + CSSLoaders

Cubo 3D

Un cubo isométrico que gira sobre su eje, con cada cara en un tono algo distinto para que parezca sólido.

Ajustes

72px
1x

Código

<div class="ul-cube-w"><div class="ul-cube"><i></i><i></i><i></i><i></i><i></i><i></i></div></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Más en Loaders

Dónde usarlo

Un cubo 3D en CSS puro habla de paquetes y de piezas de construcción sin decir nada. Úsalo en la página de seguimiento de una empresa de envíos, mientras un configurador de producto en 3D prepara su modelo o en la subida de archivos de una app de almacenamiento en la nube. Las caras están sombreadas, sin imágenes ni librerías.

Elige un color principal de tono medio: las caras laterales se oscurecen a partir de él, así que con uno muy oscuro no queda contraste. Haz el segundo color más claro, porque pinta la cara de arriba y la de abajo y es lo que le da luz.