La perspective-originpropiedad determina el origen de la perspectivepropiedad. Piense en ello como el punto de fuga del espacio 3D actual.
Tenga en cuenta que en cuanto a la perspectivepropiedad, perspective-origindebe definirse en el elemento padre para dar profundidad a los hijos transformados.
La perspective-originpropiedad no hace nada por sí sola. Tiene que estar definido en un elemento junto con perspective.
/** * Syntax * perspective-origin: x-position * perspective-origin: x-position y-position * * perspective-origin:
| | constants | inherit */ .element1 ( perspective-origin: 25% 75%; ) .element2 ( perspective-origin: 10px 25px; ) .element3 ( perspective-origin: left bottom; ) A continuación se muestra una demostración que muestra cómo se comporta un cubo 3D al alterar su punto de fuga cambiando el perspective-originvalor (constantes).
¡Oye, animemos el origen de la perspectiva, solo por diversión!
- Comienza en "0% 0%" (arriba a la izquierda)
- Luego vaya a "100% 0%" (arriba a la derecha)
- Luego a "100% 100%" (abajo a la derecha)
- Luego a "0% 100%" (abajo a la izquierda)
- Luego vuelve a 1. y reinicia
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 3 * | 3,2 * |