Cómo crear un cubo en CSS

Los cubos CSS realmente son un reflejo de lo que es posible crear en los últimos años mediante este lenguaje de diseño. La evolución de las directivas de color y dimensión han hecho que este lenguaje sea capaz de crear elementos visuales y creativos complejos. Ademas, ya si añades algo de animación, obtendrás algo realmente bueno. Desafortunadamente cada tutorial que he leído para crear un cubo CSS es bastante largo y mezclas conceptos matemáticos acerca de los cubos, así que he decidido escribir un artículo que os proporcione sólo lo básico y necesario para crear un cubo en CSS. He basado este tutorial en la increíble demo de CodePen desarrollada por Mircea Georgescu.

El HTML

El elemento de cubo, una capa envoltorio en sí mismo, en realidad tienen otra capa que la envuelve:

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

Cada cara del cubo tendrá su propio elemento. Como puedes imaginar, les daremos forma con CSS para ubicarlas en la posición adecuada.

El CSS

El primer elemento significativo es toda la envoltura de animación, que proporcionará una perspectiva CSS para el elemento 3D:

.wrap {
	perspective: 800px;
	perspective-origin: 50% 100px;
}

La perspectiva en CSS es un concepto difícil de explicar, pero MDN hace un gran trabajo así que no voy duplicar su explicación. Para entender mejor la perspectiva, recomiendo modificando la propiedad perspectiva para ver cómo afecta a la demo. Lo siguiente es el contenedor del cubo que mantendrá la totalidad de las diferentes caras del cubo:

.cube {
	position: relative;
	width: 200px;
	transform-style: preserve-3d;
}

El cubo será de 200 píxeles de ancho, con posicionamiento relativo de modo que las caras con posición absoluta se mantengan dentro de los límites. También utilizaremos preserve-3d para mantener el elemento 3D y no se convierta en plano. Antes de ponernos con cualquiera de las reglas específicas de la cara, hay algunos estilos generales que también les afectan:

.cube div {
	position: absolute;
	width: 200px;
	height: 200px;
}

Con la posición y las dimensiones del conjunto de caras, podemos llegar a crear el código de transformación para las caras individuales:

.back {
	transform: translateZ(-100px) rotateY(180deg);
}
.right {
	transform: rotateY(-270deg) translateX(100px);
	transform-origin: top right;
}
.left {
	transform: rotateY(270deg) translateX(-100px);
	transform-origin: center left;
}
.top {
	transform: rotateX(-90deg) translateY(-100px);
	transform-origin: top center;
}
.bottom {
	transform: rotateX(90deg) translateY(100px);
	transform-origin: bottom center;
}
.front {
	transform: translateZ(100px);
}

Los valores rotateY giran las caras para mostrar el texto en el ángulo correcto, mientras que el ajuste translateZ mueve los elementos hacia adelante y hacia atrás dentro de la pila. El ajuste translateY puede ser confuso, pero ten en cuenta que uno de los emblemas para subir o bajar una cara y mostrar así el efecto 3D a través de los cristales transparentes. Cada cara tiene sus propios ajustes para ser colocada en el lugar adecuado, así que siéntete libre de modificar dichos valores.

Spinning Horizontal del Cubo

A continuación te mostramos como animar el cubo con un spinning horizontal:

@keyframes spin {
	from { transform: rotateY(0); }
	to { transform: rotateY(360deg); }
}

.cube {
	animation: spin 5s infinite linear;
}

Probablemente es más fácil de lo que crees, ¿verdad? El texto es correcto debido a la rotación que hemos implementado anteriormente.

Spinning Vertical del Cubo

A continuación te mostramos como animar el cubo con un spinning vertical:

@keyframes spin-vertical {
	from { transform: rotateX(0); }
	to { transform: rotateX(-360deg); }
}

.cube-wrap.vertical .cube {
	margin: 0 auto; /* keeps the cube centered */

	transform-origin: 0 100px;
	animation: spin-vertical 5s infinite linear;
}

.cube-wrap.vertical .top {
	transform: rotateX(-270deg) translateY(-100px);
}

.cube-wrap.vertical .back {
	transform: translateZ(-100px) rotateX(180deg);
}

.cube-wrap.vertical .bottom {
	transform: rotateX(-90deg) translateY(100px);
}

... Así es como cambia la animación.

Y este ha sido el artículo en el que trataba explicaros cómo aplicar como crear un cubo en CSS, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP