Definición de .perspective-origin utilizado en CSS
La propiedad .perspective-origin determina el origen para la propiedad de perspectiva. Piense en ello como el punto de fuga del actual espacio 3D.
Caso de uso : propiedad CSS perspective-origin
Si quieres utilizar esta propiedad de CSS en tu hoja styles.css, hazlo de la siguiente forma:
/**
* Syntax
* perspective-origin: x-position
* perspective-origin: x-position y-position
*
* perspective-origin: <percentage> | <length> | constants | inherit
*/
.element1 { perspective-origin: 25% 75%; }
.element2 { perspective-origin: 10px 25px; }
.element3 { perspective-origin: left bottom; }Otro ejemplo más avanzado de .perspective-origin es el siguiente de CODEPEN:
Sintaxis de .perspective-origin en CSS
perspective-origin: x-axis y-axis|initial|inherit;Valores
| El valor de la propiedad | Descripción | Manifestación |
|---|---|---|
| eje x | Definición de dónde se coloca la vista en el eje x Valores posibles:
Valor por defecto: 50% | |
| eje y | Definición de dónde se coloca la vista en el eje y Valores posibles:
Valor por defecto: 50% | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .perspective-origin
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 |
|---|---|---|---|---|---|
| pointer-events | 2.0 | 11.0 | 3.6 | 4.0 | 9.0 |
