DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
05-02-2015

La propiedad perspective agrega un efecto tridimensional afectando la distancia que hay entre un observador y las figuras en el plano a través de una variación en el eje Z; en otras palabras, permite acercar/alejar figuras en el plano:

perspectiva

Para comprender esta propiedad, simplemente imaginemos una persona viendo un objeto en el mundo 3D, ahora imaginemos que podamos variar la distancia entre la persona y el objeto, esto es posible a través de la propiedad perspective.

Con objeto nos referimos a cualquier elemento HTML.

También veremos en la segunda parte de esta entrada que podemos variar la posición del observador (el que esta viendo el objeto) y de esta forma en ángulo de visión a través de la propiedad perspective-origin.

Sigamos hablando sobre la propiedad perspective en CSS, esta propiedad agrega un factor de profundidad (Z) en los elementos HTML; su valor consta de medidas por ejemplo píxeles; según el valor de la medida:

Sintaxis de la propiedad perspective en CSS

perspective: 250px;
perspective: none;

Sintaxis de la propiedad perspective en Javascript

object.style.perspective="50px"
object.style.MozPerspective="50px"
object.style.WebkitPerspective="50px"

Ejemplo de la propiedad perspective en CSS

Veamos el siguiente ejemplo en donde podemos ver variaciones entre la perspectiva del objeto dando la sensación de que el mismo crece y decrece progresivamente; sin embargo lo único que varía en el mismo es la perspectiva:

La propiedad perspective-origin en CSS

Como mencionamos en un comienzo de esta entrada, la perspectiva simula como si un observador estuviera mirando un objeto.

¿Qué pasa si queremos determinar la posición de donde el observador está mirando?

Podemos reubicar posición del observador está mirando puede ser cambiada con la propiedad perspective-origin definiendo su posición X y Y:

Sintaxis de la propiedad perspective-origin en CSS

perspective-origin: posicion-x;
perspective-origin: posicion-x posicion-y;

Sintaxis de la propiedad perspective-origin en Javascript

object.style.perspectiveOrigin="50% 50%"
object.style.MozPerspectiveOrigin="50% 50%"
object.style.WebkitPerspectiveOrigin="50% 50%"

posicion-x y posicion-y: Indica la posición en las coordenadas de las X y Y respectivamente; pueden tener alguno de los siguientes valores:

posicion-x soporta palabras claves como left, center y right.

posicion-y soporta palabras claves como top, center y bottom.

Parte del siguiente ejemplo fue tomado de la perspective-origin; por lo tanto este ejemplo es una variante del presentado en la MDN.

Veremos cómo cambiamos el ángulo de visión del observador a través de la propiedad perspective-origin progresivamente:


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Ley del cuadrado inverso con CSS

Ley del cuadrado inverso con CSS

Unión de galaxias con JavaScript

Unión de galaxias con JavaScript

Rainbow tiles con solo CSS

Rainbow tiles con solo CSS

Algunos artículos que te pueden interesar

La pseudo-class :checked en CSS

La pseudo-class :checked en CSS

El selector de la pseudo-class :checked representa (permite seleccionar) a cualquier elemento HTML radio, checkbox u option.

Andrés Cruz 26-01-2015

Cómo emplear la cámara y la galería con Phonegap

Cómo emplear la cámara y la galería con Phonegap

Se explica emplear la cámara de un dispositivo con PhoneGap y además cómo seleccionar una foto o imagen que tengamos en nuestro dispositivo empleando la galería con JavaScript.

Andrés Cruz 24-04-2017

Creando un fondo vivo con CSS

Creando un fondo vivo con CSS

En esta entrada veremos cómo crear un fondo vivo con CSS para ser aplicados en una página web.

Andrés Cruz 03-08-2015