Crear un Cubo 3D con CSS

Por Nestor Plasencia Prado
Crear un Cubo 3D con CSS

En este tutorial utilizaremos las propiedades rotate y translate de CSS para crear un cubo 3D

¡Hola, amigos de Devcode! Hoy vamos a aprender a crear un cubo 3D con las propiedades rotate y translate de CSS.

Empecemos, en HTML añadimos un elemento

 con la clase "container", como hijo un elemento
con id de "cube", dentro de este elemento creamos 3 elementos
 con una clase que representa a la parte que ocuparan dentro del cubo ("back","left","bottom").
 
             

En CSS damos al elemento container un ancho y alto iguales determinado, para centrar el contenedor utilizamos la propiedad margin y con el valor relative en la propiedad position el elemento ya no será fijo de modo que los elementos hijos con valor absolute se ubicarán relativos a este elemento.

.container {
  width: 150px;
  height: 150px;
  margin: 50px auto;
  position: relative;
}

Para el elemento cube solo definiremos un ancho y alto del 100% del elemento padre y el valor absolute en su propiedad position.

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
}

Para cada uno de los elementos figure dentro del elemento cube asignamos un ancho y alto del 100% de las medidas del elemento padre, eliminamos todo margen que haya sido heredado con el valor de 0, asignamos un borde de 2px y nuevamente el valor absulute en la propiedad position.

#cube figure {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 2px solid black;
  position: absolute;
}

A cada una de las caras asignamos un color flat como fondo, esto mediante el uso de la escala HSLa, con una transparencia del 50%.

#cube .back {
  background: hsla(0, 100%, 50%, 0.5); 
}
#cube .left {
  background: hsla(60, 100%, 50%, 0.5);
}
#cube .bottom {
  background: hsla(120, 100%, 50%, 0.5);
}

Ahora preparemos el entorno 3D con dos propiedades, la primera es perspective que asignara un valor a la posición desde la que se visualizara todo elemento con propiedades en tres dimensiones. 

.container {
  perspective: 400px;
}

La segunda propiedad es transform-style que con el valor de preserve-3d ayuda a visualizar el entrelazamiento de objetos en 3D.

#cube {
   transform-style: preserve-3d;
}

Ahora usaremos la propiedad rotate, esta propiedad puede ser aplicada en cualquiera de los 3 ejes (x,y,z) con valores en grados sexagesimales.

#cube .back {
  transform: rotateX(0deg);
}
#cube .left {
  transform: rotateY(60deg);
}
#cube .bottom {
  transform: rotateX(60deg);
}

Ahora utilizaremos la propiedad translate, al igual que rotate esta propiedad también puede ser aplicada a los 3 ejes, en esta ocasión solo la trasladaremos en el eje z la mitad del tamaño del cubo en sentido negativo. En la propiedad rotate completamos el giro hasta los 90 grados.

#cube .back {
   transform: rotateX(0deg) translateZ(-75px);
}
#cube .left {
  transform: rotateY(90deg) translateZ(-75px);
}
#cube .bottom {
  transform: rotateX(90deg) translateZ(-75px);
}

Con esto ya se tendrá la mitad del cubo completamente ubicada.


Para completar el cubo en HTML agregamos las tres caras restantes ("front","right","top").

                       

En CSS les asignamos un color flat, rotamos la misma cantidad de ángulos que su contraparte, pero al trasladarlos esta vez será en sentido positivo.

#cube .front {
  background: hsla(180, 100%, 50%, 0.5);
  transform: rotateX(0deg) translateZ(75px);
}
#cube .right {
  background: hsla(240, 100%, 50%, 0.5);
  transform: rotateY(90deg) translateZ(75px);
}
#cube .top {
  background: hsla(320, 100%, 50%, 0.5);
  transform: rotateX(90deg) translateZ(75px);
}

Con esto tenemos el cubo completamente generado y ubicado.


Ahora vamos a crear unos controles para poder girar el cubo. En HTML creamos una nueva

 con la clase "botones", dentro de esta cuatro elementos
con la clase "boton" y con un id para cada dirección de giro que ejecutara el botón.
 
 
 
 

En CSS centramos el elemento botones con la propiedad margin, además de asignar un ancho y alto específico de los botones.

.botones {
  width: 30px;
  height: 30px;
  margin: 0 auto
}

A cada uno de los botones damos el mismo ancho y alto, además de un estilo circular y de color negro. A los iconos damos el color blanco y los centramos con text-aling y line-height. Para identificar que son botones asignamos el valor de pointer a la propiedad cursor.

.boton {
  /*estructura*/
  width: 30px;
  height: 30px;
  background-color: black;
  border-radius: 50%;
  /*texto*/
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}

Para ubicar correctamente los botones, usaremos las propiedades de position para que todos los botones se ubiquen referenciados en el elemento "botones".

.botones {
  position: relative;
}
.boton {
  position: absolute;
}

Con las propiedades left y top desplazamos los elementos a una posición deseada.

#abajo {
  top: 35px;
}
#izquierda {
  top: 35px;
  left: -35px;
}
#derecha {
  top: 35px;
  left: 35px;
}

Para la interacción usaremos jQuery, agregamos la librería en los settings.

En JavaScript creamos dos variables que almacenarán el giro en X como en Y.

var angX = 0;
var angY = 0;

Por cada click en algún elemento de la clase "boton", dispara una función que modifica los valores de los ángulos.

$('.boton').on('click', function() {
  switch ($(this).attr("id")) {
   }
});

Dependiendo del valor del id del botón presionado aumentará o disminuirá el valor en 90 grados ya sea en X o en Y.

case "arriba":
  angX = angX + 90;
  break;
case "abajo":
  angX = angX - 90;
  break;
case "derecha":
  angY = angY + 90;
  break;
case "izquierda":
  angY = angY - 90;
  break;

Mediante el método attr agregamos la propiedad transform con los respectivos desplazamientos a todo el elemento "cube".

$('#cube').attr('style', 'transform: rotateX(' + angX + 'deg) rotateY(' + angY + 'deg);')

Para que el cambio pueda ser apreciado agregamos la propiedad transition a los cambios en la propiedad transform con el valor de 1 segundo.

#cube {
  transition: transform 1s;
}

Con esto al presionar los botones obtendremos el giro del cubo. 


Si deseas aprender mas de programación, recuerda que en Devcode tenemos de forma totalmente gratuita el Curso de HTML y CSS y muchos otros cursos esperando por ti para ayudarte a complementar tu aprendizaje. No olvides compartir el tutorial con tus amigos y dejarnos tus dudas u opiniones en la caja de comentarios.

¿Te gustó el tutorial?

Ayúdanos a llegar a más personas

Nestor Plasencia Prado

Nestor Plasencia Prado

Programmer | Developer | Maker | Robot Designer | Knowmad