We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

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
Animation typea 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
La definición de 'perspective' en esta especificación.
Working Draft  

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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)
? Sin soporte (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,