La perspective-originproprietà determina l'origine della perspectiveproprietà. Consideralo come il punto di fuga dell'attuale spazio 3D.
Nota come per la perspectiveproprietà, perspective-origindeve essere definita sull'elemento genitore per dare profondità ai figli trasformati.
La perspective-originstruttura non fa nulla da sola. Deve essere definito su un elemento insieme a 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; ) Di seguito è riportata una demo che mostra come si comporta un cubo 3D quando altera il suo punto di fuga modificando il perspective-originvalore (costanti).
Ehi, animiamo l'origine della prospettiva, solo per divertimento!
- Inizia da "0% 0%" (in alto a sinistra)
- Quindi vai a "100% 0%" (in alto a destra)
- Quindi a "100% 100%" (in basso a destra)
- Quindi a "0% 100%" (in basso a sinistra)
- Quindi torna a 1. e riavvia
Supporto browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 3.2 * |