¡Dibujos 3D con CSS! Construye una casa al estilo Minecraft

¡Te doy la bienvenida a un nuevo reto de CSS! Hoy haremos una casa en 3D al estilo Minecraft con CSS 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. Escoge la casa que quieres replicar
3. Dibuja a lápiz la casa que escogiste
4. Transforma el dibujo a lápiz en dibujo con CSS
5. ¡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

Para construir nuestra casa al estilo Minecraft debemos comprender muy bien cómo funciona tanto la rotación como la traslación de elementos en un plano tridimensional en CSS. Para ello, hemos creado para ti el siguiente post que te enseñará las bases necesarias para rotar y trasladar elementos en un plano 3D en CSS a partir de gráficos, animaciones y código.

💡 Estúdialo a detalle con este tutorial: ¡Dibujos 3D con CSS! Entiende rotación y traslación

Paso 2: escoge la casa que quieres replicar

Encuentra la casa que más te guste para replicarla en CSS. Te recomiendo hacer búsquedas en Google, YouTube o Pinterest de tipo “minecraft houses” para que puedas escoger entre la gran variedad de resultados.

En mi caso, encontré este video de YouTube llamado Minecraft: How To Build A Small & Easy Modern House Tutorial (#24) y le tomé pantallazo a la casita en el minuto 5:51, ya que tenía el ángulo que se ajustaba a lo que quería plasmar (basado en el tutorial anterior):

Paso 3: dibuja a lápiz la casa que escogiste

Antes de escribir código CSS podemos pensar que nuestra casa es como un rompecabezas con muchas piezas que debemos encajar perfectamente para obtener un hermoso resultado final.

Una vez tenemos en nuestra mente la idea de que nuestra casa está compuesta de muchas piezas, debemos entender cómo son esas piezas y en dónde están ubicadas para poder armarlas con mayor facilidad en CSS.

Para ello, te propongo hacer un dibujo a lápiz de la casa que escogiste. No tiene que ser un dibujo con medidas líneas y trazos perfectos. La idea con este dibujo es que podamos entender y conocer muy bien cómo está diseñada la casa. Sabremos cuántos pisos tiene, cuántas paredes, cuántas ventanas, etc.

Aquí te comparto mi dibujo para que puedas tener una referencia:

Una vez conocemos nuestra casa a través del dibujo a lápiz, empezamos a descifrar cuáles serían las diferentes piezas del rompecabezas y les colocamos un nombre.

En general, piensa que las piezas:

• Son elementos muy pequeños como: una puerta, una ventana, una pared o porción de pared, un techo, un pedazo de suelo, etc.
• Serán los <div> en nuestro HTML que tendremos que ir ubicando (por medio de la rotación y traslación) con CSS.
• Tendrán un nombre que nos va a servir para nombrar las clases de CSS más adelante.
• Y nos ayudarán a tener una referencia clara para la construcción de nuestra casa.

Aquí te comparto mi dibujo con nombres para que puedas tener una referencia:

Paso 4: transforma el dibujo a lápiz en dibujo con CSS

Para transformar el dibujo a lápiz que hicimos en el paso anterior en elementos de HTML y CSS, te propongo comenzar a ubicar las piezas desde la base hasta la cima de la casa y de izquierda a derecha. Teniendo en cuenta estas reglas, comenzaremos la maquetación en el siguiente orden:

1. Estructura base del espacio 3D
2. Suelo
3. Primer piso
4. Segundo piso
5. Tejado externo

Estructura base del espacio 3D

Esta estructura base es fundamental para poder comenzar a realizar nuestros dibujos en 3D. La idea es que nos quede de esta forma para colocar nuestras piezas allí:

El HTML solo tendría un contenedor padre y todas las piezas irían dentro de él:

<div class=container>
  <!-- Aquí vendrán las piezas :) -->
</div>

Y nuestro CSS tendría lo siguiente:

/* COLORS */

:root {
  --gray-1: #EEEEEE;
  --gray-2: #DDDDDD;
  --gray-3: #CCCCCC;
  --gray-4: #BBBBBB;
  --gray-5: #A3A3A3;
  --white: #FFFFFF;
  --green: #CFFFDC;
  --brown-1: #8f6b32;
  --brown-2: #815919;
  --brown-3: #744700;
  --blue-1: #9AD0EC;
  --blue-2: #77ACF1;
}

/* POSITIONS */

.absolute {
  position: absolute;
}

/* MAIN STRUCTURE */

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

body {
  display: grid;
  place-items: center;
  height: 100vh;
  overflow: hidden;
  background: var(--blue-2);
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  transform: perspective(10000px)
             rotateX(78deg)
             rotateZ(50deg)
             translateZ(-10vw);
  width: 60vw;
  height: 60vw;
  background: var(--white);
}

💡 Nota: Esta estructura la vimos en la parte 1 de este blogpost. Si tienes alguna duda, recuerda que puedes escribirnos en los comentarios.

Aquí te comparto mi codepen con el resultado y la página para sacar los colores en gradiente.

Suelo

El suelo de nuestra casita tiene la siguiente apariencia:

Para lograrlo, veamos cómo podemos hacer la traslación de la zona verde para que también logremos hacer la piscina de la misma forma:

Teniendo en cuenta lo anterior, nuestro HTML quedaría de la siguiente forma:

<div class="green-zone absolute"></div>
<div class="pool absolute"></div>

Y nuestro CSS:

.green-zone {
  width: 40vw;
  height: 20vw;
  background: var(--green);
  transform: translateX(10vw) translateY(30vw);
}

.pool {
  width: 30vw;
  height: 10vw;
  background: var(--blue-1);
  transform: translateX(10vw) translateY(10vw);
}

Aquí te comparto mi codepen con el resultado.

Primer piso

El primer piso de nuestra casita tiene la siguiente apariencia (sumándole el suelo que ya hicimos):

Para comenzar a ubicar muros, ventanas y puerta, la clave es tener claro en dónde quiero mi pieza y basado en eso cuál es el eje correspondiente de traslación.

Por ejemplo, si quiero mi pieza al lado izquierdo (como wall-1), lo que hago es:

1. Rotarla en el eje X -90 grados.
2. Trasladarla en X lo que quiero que se desplace del fondo hacia el frente.
3. Trasladarla en Y lo que quiero que suba (valor negativo) o baje (valor positivo).
4. Trasladarla en Z lo que quiero que se desplace de derecha a izquierda.

Te hice el siguiente gráfico para que estemos hablando en el mismo idioma con respecto a lo que es derecha, izquierda, fondo, frente, subir y bajar:

La rotación en X se vería de la siguiente manera:

La traslación en X se vería de la siguiente manera (desde el fondo hacia el frente):

La traslación en Z se vería de la siguiente manera (desde la derecha hacia la izquierda):

La traslación en Y se vería de la siguiente manera (desde abajo hacia arriba):

Y si quiero mi pieza al frente (como wall-4), lo que hago es:

1. Rotarla en el eje Y -90 grados.
2. Trasladarla en X lo que quiero que suba o baje.
3. Trasladarla en Y lo que quiero que se desplace de derecha a izquierda.
4. Trasladarla en Z lo que quiero que se desplace del fondo hacia el frente.

La rotación en Y se vería de la siguiente manera:

La traslación en Y se vería de la siguiente manera (de derecha a izquierda):

La traslación en Z se vería de la siguiente manera (desde el fondo hacia el frente):

La traslación en X se vería de la siguiente manera (desde abajo hacia arriba):

Teniendo en cuenta lo anterior, el HTML para nuestras piezas para el primer piso nos quedaría de la siguiente manera:

<div class="wall-1 absolute"></div>
<div class="wall-2 absolute"></div>
<div class="window-1 absolute"></div>
<div class="wall-3 absolute"></div>
<div class="wall-4 absolute"></div>
<div class="door absolute"></div>
<div class="wall-5 absolute"></div>
<div class="wall-6 absolute"></div>
<div class="wall-7 absolute"></div>
<div class="roof-1 absolute"></div>

Y el CSS así:

.wall-1 {
  width: 20vw;
  height: 5vw;
  background: var(--brown-2);
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateX(15vw) translateZ(45vw);
}

.wall-2 {
  width: 5vw;
  height: 5vw;
  background: var(--brown-2);
  transform-origin: bottom left;
  transform: rotateX(-90deg)
             translateX(15vw)
             translateY(-5vw)
             translateZ(45vw);
}

.window-1 {
  width: 10vw;
  height: 5vw;
  background: var(--brown-1);
  transform-origin: bottom left;
  transform: rotateX(-90deg)
             translateX(20vw)
             translateY(-5vw)
             translateZ(45vw);
}

.wall-3 {
  width: 5vw;
  height: 5vw;
  background: var(--brown-2);
  transform-origin: bottom left;
  transform: rotateX(-90deg)
             translateX(30vw)
             translateY(-5vw)
             translateZ(45vw);
}

.wall-4 {
  width: 10vw;
  height: 15vw;
  background: var(--brown-3);
  transform-origin: bottom left;
  transform: rotateY(-90deg)
             translateY(35vw)
             translateZ(-35vw);
}

.door {
  width: 10vw;
  height: 5vw;
  background: var(--brown-1);
  transform-origin: bottom left;
  transform: rotateY(-90deg)
             translateY(30vw)
             translateZ(-35vw);
}

.wall-5 {
  width: 10vw;
  height: 10vw;
  background: var(--brown-3);
  transform-origin: bottom left;
  transform: rotateY(-90deg)
             translateY(20vw)
             translateZ(-35vw);
}

.wall-6 {
  width: 30vw;
  height: 15vw;
  background: transparent;
  border-top: 5vw solid var(--gray-2);
  border-left: 5vw solid var(--gray-2);
  border-right: 5vw solid var(--gray-2);
  box-sizing: border-box;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateX(10vw) translateZ(35vw);
}

.wall-7 {
  width: 15vw;
  height: 35vw;
  background: transparent;
  border-bottom: 5vw solid var(--gray-3);
  border-right: 5vw solid var(--gray-3);
  box-sizing: border-box;
  transform-origin: bottom left;
  transform: rotateY(-90deg) translateY(15vw) translateZ(-40vw);
}

.roof-1 {
  width: 30vw;
  height: 35vw;
  background: pink;
  background: var(--gray-4);
  transform: translateX(10vw) translateY(15vw) translateZ(15vw);
}

Aquí te comparto mi codepen con el resultado.

Segundo piso

El segundo piso de nuestra casita tiene la siguiente apariencia (sumándole el suelo y el primer piso que ya hicimos):

Teniendo en cuenta la clave fundamental que vimos en el apartado anterior para poder ubicar nuestras piezas dependiendo del lugar en donde las deseemos, comenzaremos a realizar el segundo piso de nuestra casa.

Para ello, nuestro HTML quedaría de la siguiente manera:

<div class="wall-8 absolute"></div>
<div class="wall-9 absolute"></div>
<div class="wall-10 absolute"></div>
<div class="waindow-2 absolute"></div>
<div class="wall-11 absolute"></div>
<div class="wall-12 absolute"></div>
<div class="wall-13 absolute"></div>
<div class="roof-2 absolute"></div>

Y nuestro CSS de la siguiente manera:

.wall-8 {
  width: 5vw;
  height: 5vw;
  background: var(--brown-2);
  transform-origin: bottom left;
  transform: rotateX(-90deg)
             translateX(30vw)
             translateY(-15vw)
             translateZ(45vw);
}

.wall-9 {
  width: 5vw;
  height: 5vw;
  background: var(--brown-3);
  transform-origin: bottom left;
  transform: rotateY(-90deg)
             translateX(15vw)
             translateY(45vw)
             translateZ(-35vw);
}

.wall-10 {
  width: 5vw;
  height: 25vw;
  background: var(--gray-1);
  border-left: 1vw solid var(--brown-3);
  box-sizing: border-box;
  transform-origin: bottom left;
  transform: rotateY(-90deg)
             translateX(15vw)
             translateY(20vw)
             translateZ(-35vw);
}

.window-2 {
  width: 20vw;
  height: 5vw;
  background: transparent;
  border-bottom: 1vw solid black;
  border-left: 1vw solid black;
  box-sizing: border-box;
  transform-origin: bottom left;
  transform: rotateX(-90deg)
             translateX(15vw)
             translateY(-15vw)
             translateZ(42vw);
}

.wall-11 {
  width: 30vw;
  height: 5vw;
  background: var(--gray-2);
  transform-origin: bottom left;
  transform: rotateX(-90deg)
             translateX(10vw)
             translateY(-20vw)
             translateZ(45vw);
}

.wall-12 {
  width: 10vw;
  height: 35vw;
  background: transparent;
  border-top: 5vw solid var(--gray-3);
  border-right: 5vw solid var(--gray-3);
  box-sizing: border-box;
  transform-origin: bottom left;
  transform: rotateY(-90deg)
             translateX(15vw)
             translateY(15vw)
             translateZ(-40vw);
}

.wall-13 {
  width: 5vw;
  height: 5vw;
  background: var(--gray-5);
  transform-origin: bottom left;
  transform: rotateX(-90deg)
             translateX(35vw)
             translateY(-15vw)
             translateZ(15vw);
}

.roof-2 {
  width: 30vw;
  height: 35vw;
  background: pink;
  background: var(--gray-4);
  transform: translateX(10vw) translateY(15vw) translateZ(25vw);
}

Aquí te comparto mi codepen con el resultado.

Tejado externo

Para el tejado externo, necesitamos dos piezas para formar el techo y dos piezas para formar la columna para que nos quede de la siguiente forma:

Teniendo en cuenta lo enterior, nuestro HTML quedaría de la siguiente forma:

<div class="roof-3 absolute"></div>
<div class="roof-4 absolute"></div>
<div class="column-1 absolute"></div>
<div class="column-2 absolute"></div>

Y nuestro CSS de la siguiente forma:

.roof-3 {
  width: 30vw;
  height: 10vw;
  background: pink;
  background: var(--gray-4);
  transform: translateX(10vw) translateY(5vw) translateZ(15vw);
}

.roof-4 {
  width: 3vw;
  height: 10vw;
  background: var(--gray-3);
  transform-origin: bottom left;
  transform: rotateY(-90deg)
             translateX(12vw)
             translateY(5vw)
             translateZ(-40vw);
}

.column-1 {
  width: 15vw;
  height: 2vw;
  background: var(--brown-3);
  transform-origin: bottom left;
  transform: rotateY(-90deg)
             translateY(5vw)
             translateZ(-35vw);
}

.column-2 {
  width: 2vw;
  height: 15vw;
  background: var(--brown-2);
  transform-origin: bottom left;
  transform: rotateX(-90deg)
             translateX(33vw)
             translateZ(-8vw);
}

Aquí te comparto mi codepen con el resultado.

Paso 5: ¡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 casa al estilo Minecraft. 😄

Aquí te comparto mi codepen con el resultado final (la letra de Minecraft la saqué de aquí: https://fontmeme.com/minecraft-font/)

Además, cuéntanos qué otro tipo de retos te gustaría encontrar en esta sección.

#NuncaParesDeAprender