CSS: Perspectiva

La perspectiva es una técnica gráfica que simula la percepción de profundidad, creando bonitos efectos tridimensionales (3D). En CSS existe la posibilidad de crear efectos visuales más realistas para las páginas web. Esto se consigue indicando un punto de fuga a partir de un valor numérico de distancia.

CSS provee la función perspective() para indicar la distancia del punto de fuga, y se usa dentro de la propiedad de transformación transform. También existe una serie de propiedades específicas que se detallan a continuación.

El punto de fuga se entiende de la siguiente manera: a mayor distancia, más lejos está el usuario y menor se aprecia la percepción de perspectiva; y viceversa, a menor distancia, mayor será la simulación de la perspectiva.

La función ‘perspective()’

La función perspective() permite indicar la distancia del punto de fuga para simular que hay profundidad; es decir, la distancia que hay entre el usuario y el plano del eje Z. Así obtendremos una percepción de perspectiva desde la que estaría el espectador si la interfaz 2D fuera en 3D. Como en todas las funciones de transformación, se usa como valor de la propiedad CSS transform.

Esta función admite un único parámetro, que debe ser un valor numérico indicando unidades de longitud. Este valor debe representar la distancia que hay entre el usuario y el plano del eje Z. El valor debe ser positivo. Si el valor es 0 o negativo, no se aplicará ninguna transformación de perspectiva.

Vamos a ver un ejemplo de un contenedor cuadrado con un elemento turquesa al que rotamos 45 grados a través del eje vertical (Y). La arista más cercana se verá más larga y la arista más lejana se verá más corta. Las aristas superior e inferior apuntarán al punto de fuga indicado a una distancia de 60 píxeles.

Código CSS:

.contenedor {
  background: #ff7f2aaa;
  border: 1px solid #ff7f2a;
  display: inline-block;
  height: 40px;
  width: 40px;
}

.contenido {
  background: teal;
  height: 40px;
  width: 40px;
}

.perspectiva {
  transform: perspective(60px) rotateY(45deg);
}

Resultado:

A

R

En el ejemplo se puede ver el caso de la izquierda, sin perspectiva, y el caso de la derecha, con una perspectiva de 50 píxeles. Si el valor fuera más pequeño, la perspectiva se vería todavía más pronunciada.

La propiedad ‘perspective’

La propiedad CSS perspective funciona de forma muy similar a la función anterior, pero se diferencia básicamente en dos aspectos. El primero es que permite indicar la distancia del punto de fuga en el elemento contenedor (padre), de modo que todos los elementos hijos tendrán la misma perspectiva. Y el segundo es que no requiere el uso de la propiedad transform.

Esta propiedad admite un único valor que será numérico en unidades de longitud. Dicho valor representará la distancia que hay entre el usuario y el plano del eje Z. No admite el valor 0 ni tampoco valores negativos; en estos casos se considerará un error de sintaxis. El valor none indica que no se aplica transformación de perspectiva. Si el valor es menor que 1px, se fija en 1px.

En el siguiente ejemplo, el elemento contenedor (padre) usa la propiedad perspective, que hará que los elementos hijos se vean con perspectiva. El elemento hijo usa la propiedad rotate para quitarlo del plano 2D y poder visualizar el efecto de simulación de perspectiva.

Código CSS:

.contenedor-pp {
  background: #ff7f2aaa;
  border: 1px solid #ff7f2a;
  display: inline-block;
  height: 40px;
  perspective: 60px;
  width: 40px;
}

.contenido-pp {
  background: teal;
  height: 40px;
  rotate: y -60deg;
  width: 40px;
}

Resultado:

A

R

Este ejemplo se diferencia del anterior en que se rota el cuadrado turquesa -60 grados a través del eje Y. La perspectiva sigue siendo de 60 píxeles de distancia, por lo que el punto de fuga es el mismo.

La propiedad ‘perspective-origin’

En CSS también existe la propiedad perspective-origin, que permite indicar la posición del punto de fuga sobre el plano al que observa el usuario. Por defecto, el punto de fuga está en el centro del elemento contenedor (padre), siendo el elemento sobre el que se usa dicha propiedad, al igual que perspective.

Esta propiedad admite uno o dos valores, dependiendo de si se quiere modificar la posición del punto de fuga a través del eje horizontal (X) o si también se quiere modificar su posición a través del eje vertical (Y).

Puede usarse valores numéricos en unidades de longitud, pero si se desea también se puede usar las palabras clave que se detallan a continuación.

Para el eje horizontal (X):

Para el eje vertical (Y):

Vamos a ver un ejemplo indicando que la posición del punto de fuga será en la esquina inferior izquierda, por lo que el valor será left bottom.

Código CSS:

.contenedor-po {
  background: #ff7f2aaa;
  border: 1px solid #ff7f2a;
  display: inline-block;
  height: 40px;
  perspective: 60px;
  perspective-origin: left bottom;
  width: 40px;
}

.contenido-po {
  background: teal;
  height: 40px;
  rotate: y -60deg;
  width: 40px;
}

Resultado:

A

R

Tal y como se puede apreciar, en el caso de la derecha, el elemento turquesa ha quedado en perspectiva, teniendo el punto de fuga en la esquina inferior izquierda. La arista inferior no se deforma, pero la superior sí.

La propiedad ‘backface-visibility’

La propiedad CSS backface-visibility permite indicar si se oculta o se muestra la cara posterior (reverso) de un elemento 3D cuando se está rotando hacia el punto de vista del usuario. Esta propiedad no tiene ningún efecto en las transformaciones 2D sin perspectiva. Se aplica sobre el elemento contenedor (padre).

Esta propiedad admite dos valores posibles: hidden, para indicar que no se muestre la cara oculta, y visible (por defecto), para indicar que debe mostrarse la cara oculta cuando esté de cara al usuario en un elemento que esté rotando. Si es visible, se muestra una imagen de espejo de la cara frontal.

Debido al hecho de que por defecto se muestra la imagen invertida en el reverso, la principal utilidad de esta propiedad es evitar que la cara frontal de un elemento sea visible en la cara posterior. En casos así puede ser muy útil.

Vamos a ver el reverso de nuestro ejemplo, haciéndolo girar más de 90 grados, hasta unos 150 grados. Así veremos la cara oculta.

Código CSS:

.contenedor-bv {
  background: #ff7f2aaa;
  backface-visibility: visible;
  border: 1px solid #ff7f2a;
  display: inline-block;
  height: 40px;
  perspective: 60px;
  width: 40px;
}

.contenido-bv {
  background: teal;
  height: 40px;
  rotate: y 150deg;
  width: 40px;
}

Resultado:

A

R

En el caso de la izquierda, sin transformaciones aplicadas, vemos la cara frontal. En cambio, en el de la derecha, que está rotado 150 grados, vemos la cara frontal por detrás, invertida horizontalmente.