Cómo funciona la perspectiva CSS

Como alguien a quien le encanta crear animaciones CSS, una de las herramientas más poderosas que uso es perspective. Si bien la perspectivepropiedad no es capaz de generar efectos 3D por sí sola (ya que las formas básicas no pueden tener profundidad), puede usar la transformpropiedad para mover y rotar objetos en un espacio 3D (con los ejes X, Y y Z), luego utilizar perspectivepara controlar la profundidad.

En este artículo, intentaré explicar el concepto de perspective, comenzando con lo más básico, mientras avanzamos hasta llegar a un cubo 3D completamente animado.

Los fundamentos de la perspectiva.

Comenzaremos con un simple cuadrado verde y lo moveremos en los tres ejes.

Si bien mover el objeto en los ejes X e Y es bastante sencillo, si lo movemos en el eje Z, parecerá que el cuadrado permanecerá exactamente igual, y eso se debe a que cuando el objeto se mueve en el eje Z, la animación lo acerca a nosotros y luego lo aleja, pero el tamaño (y la ubicación) del cuadrado sigue siendo el mismo. Ahí es donde perspectiveentra en juego la propiedad CSS.

Si bien perspectiveno tiene influencia sobre el objeto cuando se mueve en los ejes X o Y, cuando el objeto se mueve en el eje Z, perspectivehace que el cuadrado parezca más grande cuando se acerca a nosotros y más pequeño cuando se aleja. Sí, como en la vida “real”.

El mismo efecto ocurre cuando rotamos el objeto:

Girar el cuadrado en el eje Z se parece a la rotación normal que todos conocemos y amamos, pero cuando giramos el cuadrado en los ejes X o Y (sin usar la perspectiva), solo parece que el cuadrado se hace más pequeño (o más estrecho). ). que girar. Pero cuando sumamos perspective, podemos ver que cuando el cuadrado gira, el lado más cercano del cuadrado parece más grande, y el lado más alejado parece más pequeño, y la rotación se ve como se esperaba.

Tenga en cuenta que cuando la rotación del objeto en los ejes X o Y es de 90° (o 270°, 450°, 630°, etc.), “desaparecerá” de la vista. Nuevamente, esto sucede porque no podemos agregar profundidad a un objeto, y en esta posición el ancho (o alto) del cuadrado en realidad será 0.

El valor de la perspectiva.

Necesitamos establecer la perspectivepropiedad con un valor. Este valor establece la distancia desde el plano del objeto o, en otras palabras, la intensidad de la perspectiva. Cuanto mayor sea el valor, más lejos estará el objeto; Cuanto menor sea el valor, más notable será la perspectiva.

El origen de la perspectiva.

La perspective-originpropiedad determina la posición desde la que se “mira” un objeto. Si el origen está centrado (que es el valor predeterminado) y el objeto se mueve hacia la derecha, parecerá que lo estás mirando desde la izquierda (y viceversa).

Alternativamente, puedes dejar el objeto centrado y mover el perspective-origin. Cuando el origen está a un lado, es como si estuvieras “mirando” el objeto desde ese lado. Cuanto mayor sea el valor, más alejado se verá.

La transformación

Mientras que perspectivey perspective-originestán establecidos en el contenedor principal de un elemento y determina la posición del punto de fuga (es decir, la distancia desde el plano del objeto desde la posición desde la cual estás “mirando” el objeto), la posición y la rotación del objeto se establece usando la transformpropiedad, que se declara en el propio objeto.

Si echas un vistazo al código del ejemplo anterior, donde moví el cuadrado de un lado al otro, verás que usé la translateX()función, lo cual tiene sentido ya que quería que se moviera a lo largo del eje X. Pero observe que está asignado a la propiedad de transformación. La función es un tipo de transformación que se aplica directamente al elemento que queremos transformar, pero que se comporta según las reglas de perspectiva asignadas al elemento padre.

Podemos “encadenar” múltiples funciones a la transformpropiedad. Pero cuando se utilizan múltiples transformaciones, hay tres cosas muy importantes a considerar:

1. Al girar un objeto, su sistema de coordenadas se transforma junto con el objeto.
2. Al trasladar un objeto, se mueve en relación con su propio sistema de coordenadas (en lugar de las coordenadas de su padre).
3. El orden en el que se escriben estos valores puede (y cambiará) el resultado final.

Para obtener el efecto que buscaba en la demostración anterior, primero necesitaba trasladar el cuadrado al eje X. Sólo entonces pude rotarlo. Si esto se hubiera hecho al revés (rotar primero y luego traducir), el resultado habría sido completamente diferente.

Para subrayar lo importante que es el orden de los valores para la transformpropiedad, veamos un par de ejemplos rápidos. Primero, una simple transformación bidimensional (2D) de dos cuadrados que tienen los mismos valores de transformación, pero declarados en un orden diferente:

Es lo mismo incluso si rotamos los cuadrados en el eje Y:

Cabe señalar que si bien el orden de los valores es importante, podríamos simplemente cambiar los mismos valores para obtener el resultado deseado en lugar de cambiar el orden de los valores. Por ejemplo…

transform: translateX(100px) rotateY(90deg);

…tendrá el mismo efecto que:

transform: rotateY(90deg) translatestrongZ(100px);

Esto se debe a que en la primera línea movimos el objeto en el eje X antes de rotarlo, pero en la segunda línea rotamos el objeto, cambiamos sus coordenadas y luego lo movimos en el eje Z. Mismo resultado, diferentes valores.

Veamos algo más interesante.

Claro, los cuadrados son una buena manera de explicar el concepto general de perspectiva, pero realmente comenzamos a ver cómo funciona la perspectiva cuando la dividimos en formas tridimensionales (3D).

Usemos todo lo que hemos cubierto hasta ahora para construir un cubo 3D.

El HTML

Crearemos un elemento .container que envuelve un elemento .cube que, a su vez, consta de seis elementos que representan los lados del cubo.

div  div    div/div    div/div    div/div    div/div    div/div    div/div  /div/div

El CSS general

Primero, agregaremos algo de perspectiva al .containerelemento principal. Luego nos aseguraremos de que el .cubeelemento tenga lados de 200px y respete las transformaciones 3D. Estoy agregando algunos estilos de presentación aquí, pero las propiedades clave están resaltadas.

/* The parent container, with perspective */.container {  width: 400px;  height: 400px;  border: 2px solid white;  border-radius: 4px;  display: flex;  justify-content: center;  align-items: center;  perspective: 800px;  perspective-origin: top right;}/* The child element, with 3D tranforms preserved */.cube {  position: relative;  width: 200px;  height: 200px;  transform-style: preserve-3d;}/* The sides of the cube, absolutely positioned */.side {  position: absolute;  width: 100%;  height: 100%;  opacity: 0.9;  border: 2px solid white;}/* Background colors for the cube's sides to help visualize the work */.front { background-color: #d50000; }.back { background-color: #aa00ff; }.left { background-color: #304ffe; }.right { background-color: #0091ea; }.top { background-color: #00bfa5; }.bottom { background-color: #64dd17; }    

Transformando los lados

El frente es el más fácil. Lo avanzaremos 100 px:

.front {  background-color: #d50000;  transform: translateZ(100px);}

Podemos mover la parte posterior del cubo hacia atrás sumando translateZ(-100px). Otra forma de hacerlo es girando el lateral 180 grados y luego muévelo hacia adelante:

.back {  background-color: #aa00ff;  transform: translateZ(-100px);
  /* or */  /* transform: rotateY(180deg) translateZ(100px); */}

Al igual que la parte trasera, hay un par de formas en que podemos transformar los lados izquierdo y derecho:

.left {  background-color: #304ffe;  transform: rotateY(90deg) translateZ(100px);
  /* or */  /* transform: translateX(100px) rotateY(90deg); */}.right {  background-color: #0091ea;  transform: rotateY(-90deg) translateZ(100px);
  /* or */  /* transform: translateX(-100px) rotateY(90deg); */}

La parte superior e inferior son un poco diferentes. En lugar de rotarlos en el eje Y, debemos rotarlos en el eje X. Nuevamente, se puede hacer de dos maneras diferentes:

.top {  background-color: #00Bfa5;  transform: rotateX(90deg) translateZ(100px);
  /* or */  /* transform: translateY(-100px) rotateX(90deg); */} .bottom {  background-color: #64dd17;  transform: rotateX(-90deg) translateZ(100px);
  /* or */  /* transform: translateY(100px) rotateX(90deg); */}

¡Esto nos da un cubo 3D!

Siéntete libre de jugar con las diferentes opciones perspectivey perspective-originver cómo afectan al cubo.

Vamos a hablar acerca detransform-style

Vamos a agregar algunas animaciones sofisticadas a nuestro cubo, pero primero hablemos de la transform-stylepropiedad. Lo agregué anteriormente en el CSS general, pero realmente no expliqué qué es ni qué hace.

La propiedad de estilo de transformación tiene dos valores:

• flat(por defecto)
• preserve-3d

Cuando configuramos la propiedad en preserve-3d, hace dos cosas importantes:

1. Le indica a los lados del cubo (los elementos secundarios) que se coloquen en el mismo espacio 3D que el cubo. Si no se establece en preserve-3d, el valor predeterminado se establece en flaty los lados se aplanan en el plano del cubo. preserve-3d“copia” la perspectiva del cubo a sus hijos (los lados) y nos permite rotar solo el cubo, por lo que no necesitamos animar cada lado por separado.
2. Muestra los elementos secundarios según su posición en el espacio 3D, independientemente de su lugar en el DOM.

En este ejemplo hay tres cuadrados: verde, rojo y azul. El cuadrado verde tiene un translateZvalor de 100px, lo que significa que está delante de los otros cuadrados. El cuadrado azul tiene translateZ-100px, lo que significa que está detrás de los otros cuadrados.

Pero en el DOM, el orden de los cuadrados es: verde, rojo, azul. Por lo tanto, cuando transform-stylese establece en plano (o no se establece en absoluto), el cuadrado azul aparecerá en la parte superior y el cuadrado verde estará detrás, porque ese es el orden del DOM. Pero si configuramos el transform-styleen preserve-3d, se renderizará según su posición en el espacio 3D. Como resultado, el cuadrado verde estará al frente y el cuadrado azul estará detrás.

Animación

¡Ahora animemos el cubo! Y para hacer las cosas más interesantes, agregaremos la animación a los tres ejes. Primero, agregaremos la animationpropiedad al archivo .cube. No hará nada todavía ya que no hemos definido los fotogramas clave de la animación, pero estará listo para cuando lo hagamos.

animation: cubeRotate 10s linear infinite;

Ahora los fotogramas clave. Básicamente, vamos a rotar el cubo a lo largo de cada eje para que parezca estar rodando en el espacio.

@keyframes cubeRotate {  from { transform: rotateY(0deg) rotateX(720deg) rotateZ(0deg); }  to { transform: rotateY(360deg) rotateX(0deg) rotateZ(360deg); }}

La perspectivepropiedad es realmente lo que le da esa profundidad a la animación, como si viéramos el cubo rodar hacia la izquierda y hacia la derecha, así como hacia adelante y hacia atrás.

Pero hasta ahora, el valor de la propiedad en perspectiva había sido constante, al igual que el perspective-origin. Veamos cómo el cambio de estos valores afecta la apariencia del cubo.

Agregué tres controles deslizantes a este ejemplo para ayudar a ver cómo los diferentes valores afectan la perspectiva del cubo:

• El control deslizante izquierdo establece el valor de la perspectivepropiedad. Recuerde, este valor establece la distancia desde el plano del objeto, por lo que cuanto menor sea el valor, más notable será el efecto de perspectiva.
• Los otros dos controles deslizantes se refieren a la perspective-originpropiedad. El control deslizante derecho establece el origen en el eje vertical, de arriba a abajo, y el control deslizante inferior establece el origen en el eje horizontal, de derecha a izquierda.

Tenga en cuenta que mientras se ejecuta la animación, estos cambios pueden ser menos notorios a medida que el cubo gira, pero puede desactivar fácilmente la animación haciendo clic en el botón "Ejecutar animación".

Juega con estos valores y descubre cómo afectan la apariencia del cubo. No existe un valor "correcto" y estos valores varían de un proyecto a otro, ya que dependen de la animación, el tamaño del objeto y el efecto que desea lograr.

¿Qué es lo siguiente?

Ahora que domina los conceptos básicos de las perspectivepropiedades en CSS, puede usar su imaginación y creatividad para crear objetos 3D en sus propios proyectos, agregando profundidad e interés a sus botones, menús, entradas y cualquier otra cosa que desee "aportar". a la vida."

Mientras tanto, puedes practicar y mejorar tus habilidades intentando crear estructuras complejas y animaciones basadas en perspectivas como esta, esta, esta o incluso esta.

¡Espero que hayas disfrutado leyendo este artículo y hayas aprendido algo nuevo en el proceso! No dudes en dejar un comentario para decirme lo que piensas o escribirme en Twitter si tienes alguna pregunta sobre la perspectiva o cualquier otro tema de este artículo.