96

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

17184Puntos

hace 2 años

¡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. 😉

1

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

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:

2

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:

3

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:

4

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:

5

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:

6

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:

7

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):

8

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:

9

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:

10

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:

11

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

12

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:

13

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:

14

Y la rotación en el eje Y positivo:

15

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

16

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:

17

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

18

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:

1

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

19

💡 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

Estefany
Estefany
teffcode

17184Puntos

hace 2 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
18
33396Puntos

Y ahora un sencillo reto para dibujar un rectángulo…blackboard-mathematics-quantum-mechanics-wallpaper-preview.jpg

😄

Fuera de broma, es interesante, gracias!

2
17184Puntos
2 años

Hahahahahah 😊

5
12176Puntos

Listo!!! Estaba haciendo en total 3D y no dibujando en si para que diera una perspectiva de 3D, pero me di de cuenta justo cuando estaba iniciando el libro, pero igualmente me gusto la actividad.

Aprovechando que los hice 3D totalmente, les agregue una animación de rotar cuando se hace hover:

Link a el Repositorio en GitHub

El Libro:
book.png

Tambien el cubo lo intente hacer de una forma diferente a la actividad, intentando hacer el libro desde el wrapper y no tener una plataforma cómo en el cubo. Evitando varios cálculos y diferentes problemas.

El Cubo:
cube.png

2
62447Puntos
2 años

Super, hasta compartiste el repositorio y todo 😄

Recuerda también puedes compartirlo en tus redes sociales favoritas etiquetando a @Platzi :3

1
17184Puntos
2 años

Wow !!! Increíbles estos resultados !!! Muchas muchas felicitacionesss 🤩✨ Me encantó !!!

4
34837Puntos

Muy buen desafio Teff, a mi me gustarian mas retos como este.
#RetosPlatziCSS
RetoCSS1.png

2
62447Puntos
2 años

Wooow te quedo genial 😄

Recuerda también puedes compartirlo en tus redes sociales favoritas etiquetando a @Platzi :3

1
17184Puntos
2 años

Wow, Carlos !!! Excelente resultadoooo 🤩 Muchas felicitacionesssss !!!

3
15370Puntos

Ahora sí el reto: https://codepen.io/Londrack/full/yLPyzBZ
Deje el tamaño del libro como variables SASS y las distancias calculadas, con lo que se puede modificar el tamaño del libro.

1
17184Puntos
2 años

Wow, te quedó increíble !!! Muchas felicitacionesss 🤩✨

2
10468Puntos

Yo les recomiendo que para entender estas propiedades hagan un cubo de plastilina y siempre empiecen poniendolo frente a sus ojos para que tengan una vista en 2D del frente. Si quieren darle profundidad traten de replicar que movimientos hacen, es decir, si giras un poco, deberás hacer una rotación. También sirve un cubo de papel, pero la idea es que para que entiendan mas interactivamente, usen algún cubo.

1
17184Puntos
2 años

Me encanta esta analogía, Danny ! Gracias por compartirla con nosotros 💚

1
33396Puntos
2 años

Es un buen modelo para entenderlo. ¡Gracias Danny!

2
9449Puntos

excelente!! nuevo retito 💪🏼 gracias por el aporte master 🤓

1
17184Puntos
2 años

Yeiiii 💚💚💚

2
9319Puntos

Excelente artículo!

1
17184Puntos
2 años

💚💚💚💚💚

2
7939Puntos

Impresionantee!!

1
17184Puntos
2 años

💚💚💚💚💚

2
21862Puntos

Que genial Teff. Esto me recuerda mucho los ejercicios de geometría que nos daban en el bachillerato… Yo pensaba que si los hacía todos no me darían nada, pero ahora veo que está algo super conectado.

Vamos a ver que cosas interesantes salen con esta nueva skill. El reto lo tengo de tarea… Time to roll 😎

1
17184Puntos
2 años

Me parece excelente !!! Por aquí quedo súper atenta de tu resultadooo 🤩

1
6876Puntos

Me gustó bastante realizar este reto, espero sigan realizando más retos como este.

Aquí el resultado de mi participación en el reto: