La perspectiveproprietà CSS fornisce a un elemento uno spazio 3D influenzando la distanza tra il piano Z e l'utente.
La forza dell'effetto è determinata dal valore. Più piccolo è il valore, più ci si avvicina dal piano Z e più impressionante è l'effetto visivo. Maggiore è il valore, più sottile sarà l'effetto.
Importante: si noti che la proprietà della prospettiva non influisce sulla modalità di rendering dell'elemento; abilita semplicemente uno spazio 3D per gli elementi dei bambini. Questa è la principale differenza tra la transform: perspective()funzione e la perspectiveproprietà. Il primo dà profondità all'elemento mentre il secondo crea uno spazio 3D condiviso da tutti i suoi figli trasformati.
/** * Syntax * perspective: none | */ .parent ( perspective: 1000px; ) .child ( transform: rotateY(50deg); ) La demo sopra ha lo scopo di mostrare la differenza tra la funzione e la proprietà.
- Sul lato sinistro, puoi vedere la proprietà applicata al genitore (
perspective: 50em) degli elementi trasformati (transform: rotateY(50deg)). - Sul lato destro, la prospettiva viene applicata dalla trasformazione direttamente sui figli (
transform: perspective(50em) rotateY(50deg)).
Questo mostra come impostare la prospettiva sul genitore fa sì che tutti i bambini condividano lo stesso spazio 3D e quindi lo stesso punto di fuga.
Proviamo qualcosa di ancora più interessante: un cubo con trasformazioni 3D e prospettiva.
Ecco come viene realizzato il cubo: si basa su due involucri annidati (uno per dare la prospettiva del cubo e uno per avvolgere tutti i lati) e 6 elementi per realizzare i lati. Ad ogni elemento viene assegnata la propria trasformazione, mescolando traslando e ruotando nello spazio 3D (ad esempio transform: rotateX(90deg) translateZ(1em)).
Finiamo con una demo con quella che potrebbe essere la base di un design del mondo reale: un muro di fotografie + didascalie che utilizzano la prospettiva e la trasformazione.
Quando si librano sopra il muro, i bambini vengono ruotati di nuovo nella loro posizione normale, annullando l'effetto.
Importante! L'utilizzo della prospettiva (con un valore diverso da 0 o nessuno) crea un nuovo contesto di impilamento.
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | Qualunque | 10+ | Nessuna | 10+ | 3+ | Qualunque |
Firefox 10-15 richiede -moz-, i browser WebKit potrebbero richiedere -webkit-