perspective

Índice

Definición de .perspective aplicado en CSS

La propiedad CSS .perspective le da a un elemento un espacio 3D al afectar la distancia entre el plano Z y el usuario.

Caso de empleo de la propiedad perspective

Esta propiedad de CSS habitualmente se emplea de esta forma:

.parent {
  perspective: 1000px;
}

.child {
  transform: rotateY(50deg);
}

Otro ejemplo más avanzado de .perspective es el siguiente de CODEPEN:

Sintaxis de .perspective en CSS

perspective: length|none;

Valores

El valor de la propiedad Descripción Manifestación
longitud A qué distancia se coloca el elemento de la vista
ninguna Valor por defecto. Igual que 0. La perspectiva no está configurada.
inicial Establece esta propiedad en su valor predeterminado.
heredar Hereda esta propiedad de su elemento padre.

Exploradores compatibles con .perspective

Los números de la tabla detallan la primera versión del navegador que es plenamente compatible con la propiedad.

Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.

PropertyChromeInternet Explorer / EdgeFirefoxSafariOpera
perspective-origin 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
9.0
4.0.3 -webkit-
23.0
15.0 -webkit-

Bibliografía

No dudes en echar un vistazo a estas otras propiedades

¿Necesitas ayuda para crear tu Web?

Cuéntanos de que trata y te asesoraremos sin compromiso