MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

perspective

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

Resumen

La propiedad perspective CSS determina la distancia entre el plano z=0 y el usuario para dar algo de perspectiva al elemento 3D posicionado. Cada elemento 3D con z>0 se hace más grande y con z<0 se vuelve más pequeño. La intensidad del efecto es determinado por el valor de esta propiedad.

Parte de los elementos 3D que se encuentran destrás del usuario, es decir que su coordenada del eje z es mayor que el valor de la propiedad perspective de CSS no es dibujada.

La posición de origen que se usará para la transformación es por defecto colocado en el centro del elemento, pero su posición puede ser cambiada usando la propiedad perspective-origin.

Usando esta propiedad con un valor diferente a 0 y none se crea un nuevo contexto de apilamiento.

Valor inicialnone
Applies totransformable elements
Heredableno
Mediavisual
Valor calculadothe absolute length or none
Animatableyes, as a length
Canonical orderel orden único no-ambigüo definido por la gramática formal
Creates stacking contextyes

Syntax

Sintaxis Formal: none | <length>
perspective: none
perspective: 20px     /* <longitud> valores */
perspective: 3.5em

perspective: inherited

Valores

none
Es una palabra clave que indica que ninguna transformación de perspectiva será aplicada.
<length>
Es una <length> dando la distancia desde el usuario al plano z=0. Esta es usada para aplicar una transformación de perspectiva al elemento  y su contenido. Si es 0 o un valor negativo, no se aplica una transformación de la perspectiva.

Ejemplos

perspective:250px; perspective:350px; perspective:500px;
   
1
2
3
4
5
6
   
1
2
3
4
5
6
   
1
2
3
4
5
6

Especificaciones

Especifiación Estado Comentario
CSS Transforms Level 1
The definition of 'perspective' in that specification.
Working Draft  

Compatibilidad de navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico 12-webkit 10 (10)-moz
16 (16)
10 15-webkit (Yes)-webkit
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico 3.0-webkit 10.0 (10)-moz
16.0 (16)
? No support (Yes)-webkit

Ver también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: Sebastianz, Prinz_Rana, fscholz, teoli, AngelFQC
 Última actualización por: Sebastianz,