¡Dibujos 3D con CSS! Entiende rotación y traslación (parte 1)

¡Te doy la bienvenida a un nuevo reto de CSS! Esta vez vamos a hacer un dibujo con CSS en 3D usando la propiedad transform.

Compártenos el resultado final en los comentarios y/o en Twitter con el hashtag #RetosPlatziCSS. 😉

Antes de comenzar, los cursos de Platzi que te recomiendo para realizar este reto son los siguientes:

• Curso de Frontend Developer
• Curso Práctico de Frontend Developer
• Curso de Transformaciones y Transiciones en CSS

Paso 0: planeación

Para este reto te propongo que realices los siguientes 4 pasos:

1. Comprende la rotación y la traslación en un plano 3D
2. Conoce las condiciones del reto
3. ¡Compártenos tu resultado en los comentarios!

💡 Recomendación: Evita copiar y pegar el código. Trata de transcribir cada detalle y entender muy bien su funcionamiento (Sin afán, tómate tu tiempo). Sólo de esta forma podrás convertirte en un(a) experto(a) en maquetación con CSS.

ʕ•́ᴥ•̀ʔっ ¡Empecemos!

Paso 1: comprende la rotación y la traslación en un plano 3D

Te muestro el resultado visual de nuestro primer paso para tener un entendimiento general tanto de la rotación como de las traslación en un plano tridimensional:

Lo primero que necesitamos es la base (contenedor) rosa donde se desplazarán y se ubicarán los demás elementos. Para ello, partamos del hecho de que tenemos un div cuadrado (mismo ancho y mismo alto) con un background el cual debemos girar para darle aspecto de rombo:

Lo importante para girar nuestro elemento es conocer cuáles son los ejes y en dónde están ubicados, así sabremos si debemos girar en el eje X, en el Y o en el Z. También imagina que tus ojitos están de frente al eje Z, el giro que queremos hacer es en ese mismo eje y en el sentido de las manecillas del reloj (eje Z positivo).

Cuando se giran los elementos debemos tener presente que tanto el origen como los ejes cambian (esto lo iremos viendo a lo largo de este post).

Una vez que tenemos ese giro de nuestro cuadrado en el eje Z, debemos girarlo “hacia atrás” (eje X positivo) para que nos de esa ilusión de que hay profundidad en el elemento:

Todo lo que hemos mencionado, se vería así en nuestro HTML:

class="container">div>

Y así en nuestro CSS:

:root {
  --purple-0: #FACCFF;
  --purple-1: #DCB0FF;
  --purple-2: #BE93FD;
  --purple-3: #A178DF;
  --purple-4: #845EC2;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;
  overflow: hidden;
}

.container {
  transform: rotateX(60deg)
             rotateZ(45deg);
  width: 50vw;
  height: 50vw;
  background: var(--purple-0);
}

Una vez tenemos nuestra base, colocaremos el primer elemento y lo desplazaremos “hacia abajo”. Veamos qué es lo que debemos saber para ello:

Con base en lo anterior, así se quedaría nuestro HTML:

<divclass="container"><divclass="bottom">div>div>

Y así nuestro CSS:

.bottom {
  width: 30vw;
  height: 20vw;
  background: var(--purple-1);
  transform: translateY(30vw);
}

Aquí te comparto un GIF con el resultado que hemos logrado hasta ahora:

Una vez tenemos nuestro primer elemento desplazado, haremos algo similar con otro elemento, pero esta vez además de desplazarlo “hacia abajo” debemos subirlo para conseguir la ilusión de que está encima del primer elemento que dibujamos. Para ello, analicemos lo siguiente:

Aquí nos damos cuenta de que es el mismo desplazamiento en Z, solo que debemos tener en cuenta la posición del elemento según su orden en la estructura HTML.

Para “elevarlo” podemos añadir 2 propiedades que nos van a servir para trabajar con un espacio 3D en nuestro lienzo (perspective y transform-style):

Nuestro HTML quedaría así:

<divclass="container"><divclass="bottom">div><divclass="top">div>div>

Y nuestro CSS:

* {
  transform-style: preserve-3d;
}

.top {
  width: 30vw;
  height: 20vw;
  background: var(--purple-2);
  transform: translateY(10vw)
             translateZ(3vw);
}

Veamos cómo fueron los pasos realizados para lograr el resultado:

Ya que tenemos 2 estructuras importantes de nuestro diseño propuesto, debemos hacer uno de los laterales. Para ello, veamos la siguiente ilustración para comprender lo que debemos hacer:

Aquí lo que tenemos que tener presente es que debemos cambiar el origen de la rotación para girar el elemento desde “el suelo” y que la suma de los altos de los anteriores elementos es fundamental para poder hacer el desplazamiento.

Con base en lo anterior, nuestro HTML nos quedaría así:

<divclass="container"><divclass="bottom">div><divclass="top">div><divclass="left">div>div>

Y nuestro CSS así:

.left {
  width: 30vw;
  height: 3vw;
  background: var(--purple-3);
  transform-origin: bottom left;
  transform: rotateX(-90deg)
             translateZ(7vw);
}

Veamos cómo sería la rotación en el eje X:

Y la traslación del elemento en el eje Z:

Ahora nos queda realizar el último lateral que, en esencia, conlleva varios de los pasos que ya hemos realizado anteriormente.

Inicialmente, lo que debemos hacer es “poner de pie” al elemento (haciendo la rotación en el eje X negativo) y luego girarlo nuevamente en el eje Y:

Con lo anterior, nuestro HTML quedaría así:

<divclass="container"><divclass="bottom">div><divclass="top">div><divclass="left">div><divclass="front">div>div>

Y nuestro CSS así:

.front {
  width: 20vw;
  height: 3vw;
  background: var(--purple-4);
  transform-origin: bottom left;
  transform: rotateX(-90deg)
             rotateY(90deg);
}

Veamos cómo es la rotación en el eje X negativo:

Y la rotación en el eje Y positivo:

Como podemos ver, una vez hacemos el giro en el eje Y, los ejes cambian.

Teniendo en cuenta ese detalle del cambio de los ejes, podemos trasladar nuestro elemento tanto en Z como X:

.front {
  width: 20vw;
  height: 3vw;
  background: var(--purple-4);
  transform-origin: bottom left;
  transform: rotateX(-90deg)
             rotateY(90deg)
             translateZ(30vw)
             translateX(-4vw);
}

Veamos cómo es la traslación en el eje Z:

Y veamos cómo es la traslación en el eje X negativo:

Hasta aquí tendríamos un entendimiento general de cómo desplazar y rotar nuestros elementos para construir diferentes obras de arte en 3D con CSS.

Paso 2: Conoce las condiciones del reto

El reto que te propongo es este libro de CSS en 3D:

Lo ideal es que utilices todas las herramientas que aprendimos en este post. También recuerda que debe quedar responsive:

💡 A lo largo del post usamos la medida vw (si la viste, date un abracito). Esta medida significa viewport width y te ayudará a conseguir el responsive de todos los valores del modelo de caja y del texto.

Paso 3: ¡Compártenos tu resultado en los comentarios!

¡Este paso es mi favorito! Compártenos en los comentarios y/o en Twitter con el hashtag #RetosPlatziCSS el resultado final de tu libro. 😄

Aquí te comparto mi codepen con el ejercicio base, mi codepen con el resultado del libro, mi repositorio de GitHub y el deploy con el resultado final.

¡Cuéntanos qué otro tipo de retos te gustaría encontrar en esta sección!

#NuncaParesDeAprender