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.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| 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- |
