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

Un waffle con CSS

Un waffle con CSS

Burbujas flotantes con JavaScript

Burbujas flotantes con JavaScript

Rainbow tiles con solo CSS

Rainbow tiles con solo CSS

Algunos artículos que te pueden interesar

Efectos hovers sobre imágenes con CSS

Efectos hovers sobre imágenes con CSS

En esta entrada veremos cómo crear un simple efecto hover con CSS sobre una imagen; para esto se coloca una imagen como fondo en un contenedor y colocar múltiples cuadros consecutivos (divs) de una fracción del tamaño del fondo.

Andrés Cruz 17-03-2016

La pseudo-class nth-child en CSS

La pseudo-class nth-child en CSS

La pseudo-clase nth-child identificar un elemento dentro de una lista de etiquetas.

Andrés Cruz 16-07-2013

Carrusel fullscreen con menú lateral con jQuery y CSS

Carrusel fullscreen con menú lateral con jQuery y CSS

Se explica cómo crear una galería fullscreen o pantalla completa con un menú fijo lateral con jQuery y CSS.

Andrés Cruz 18-05-2017