Proprietà CSS perspective

La proprietà perspective definisce a quale distanza il visualizzatore si trova dal piano z = 0 degli elementi 3D figli di un elemento. In parole semplici, controlla quanto è forte l'effetto 3D: trasforma una rotazione piatta in qualcosa che sembra allontanarsi nello schermo, proprio come gli oggetti si rimpiccioliscono man mano che si allontanano dall'occhio nella vita reale.

Si imposta su un elemento genitore. Il valore è la distanza simulata dal visualizzatore allo schermo. Valori più piccoli (come 100px) posizionano il visualizzatore molto vicino, quindi la prospettiva è drammatica ed esagerata. Valori più grandi (come 1000px) posizionano il visualizzatore lontano, quindi l'effetto è sottile e quasi piatto. Questa pagina spiega come si comporta la proprietà e mostra la differenza tra none e una lunghezza reale.

Poiché il figlio si trova nello spazio 3D, le parti con z > 0 sono più vicine al visualizzatore e appaiono più grandi, mentre le parti con z < 0 sono più lontane e appaiono più piccole.

Quando si usa?

Si utilizza perspective quando si ruota un elemento in 3D (usando transform: rotateX(), rotateY(), o translateZ()) e si vuole che quella rotazione sembri profondità reale anziché una distorsione piatta. I casi comuni includono carte girevoli, cubi 3D e caroselli, ed effetti di inclinazione al passaggio del mouse.

La proprietà perspective accetta una singola <length>. Zero è valido (disabilita l'effetto, come none), e i valori negativi non sono consentiti — vengono considerati non validi e ignorati.

Per controllare dove si trova il punto di fuga (la posizione che il visualizzatore sta guardando), abbinare questa proprietà con perspective-origin. Per le rotazioni 3D stesse, vedere la proprietà transform, e per mantenere i figli annidati nello stesso spazio 3D, usare transform-style.

La proprietà perspective è una delle proprietà CSS3.

Informazione

Proprietà perspective vs. la funzione di trasformazione perspective(). La proprietà perspective non influisce sull'elemento su cui è impostata — applica solo una vista prospettica ai figli 3D trasformati di quell'elemento. Il valore perspective() utilizzato all'interno della proprietà transform applica la profondità direttamente all'elemento stesso. Usare la proprietà quando si hanno più figli che condividono una posizione del visualizzatore; usare la funzione quando un singolo elemento ha bisogno della propria profondità.

Informazione

I browser moderni supportano completamente questa proprietà senza prefissi vendor.

Valore iniziale	none
Si applica a	Elementi trasformabili.
Ereditato	No.
Animabile	Sì. La trasformazione della prospettiva è animabile.
Versione	CSS3
Sintassi DOM	object.style.perspective = "70px";

Sintassi

Sintassi CSS perspective

perspective: length | none | initial | inherit;

Esempio senza prospettiva (`perspective: none`)

Con perspective: none sul genitore, il rotateX(40deg) del figlio viene reso come una distorsione 2D piatta — non c'è senso di profondità. Questo è il punto di partenza con cui confrontarsi.

Esempio di codice CSS perspective

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the element</title>
    <style>
        .element1 {
        padding: 50px;
        position: absolute;
        border: 1px solid #666;
        background-color: #1c87c9;
        background: #8ebf42;
        -webkit-transform-style: preserve-3d;/* Safari 3-8  */
        -webkit-transform: rotateX(40deg);/* Safari 3-8  */
        transform-style: preserve-3d;
        transform: rotateX(40deg);
      }
      .element2 {
        position: relative;
        height: 160px;
        width: 160px;
        margin-left: 20px;
        border: 1px solid #000;
        -webkit-perspective: none;/* Safari 4-8  */
        perspective: none;
      }
    </style>
  </head>
  <body>
    <h2>Perspective property example</h2>
    <h3>perspective: none:</h3>
    <div class="element2">
      Box2
      <div class="element1">Box1</div>
    </div>
  </body>
</html>

Provalo tu stesso »

Risultato

Esempio con `perspective: 100px`

Ora il genitore ottiene una perspective di 100px. Poiché il visualizzatore è simulato come molto vicino, lo stesso rotateX(40deg) sul figlio viene letto come profondità reale — il bordo superiore si allontana nello schermo e il riquadro appare inclinato nello spazio 3D. Provare ad aumentare il valore a 500px o 1000px e l'inclinazione diventa più dolce.

Esempio CSS perspective con px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the element</title>
    <style>
        .element1 {
        padding: 50px;
        position: absolute;
        border: 1px solid #666;
        background-color: #1c87c9;
        background: #8ebf42;
        -webkit-transform-style: preserve-3d;/* Safari 3-8  */
        -webkit-transform: rotateX(40deg);/* Safari 3-8  */
        transform-style: preserve-3d;
        transform: rotateX(40deg);
      }
      .element2 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 50px;
        border: 1px solid #000;
        -webkit-perspective: 100px;/* Safari 4-8  */
        perspective: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Perspective property example</h2>
    <h3>perspective: 100px:</h3>
    <div class="element2">
      Box2
      <div class="element1">Box1</div>
    </div>
  </body>
</html>

Provalo tu stesso »

Valori

Valore	Descrizione
length	Applica una trasformazione prospettica all'elemento e al suo contenuto.
none	Non applica alcuna trasformazione prospettica.
initial	Fa sì che la proprietà utilizzi il suo valore predefinito.
inherit	Eredita la proprietà dall'elemento genitore.

Problemi comuni

Impostarlo sul genitore, non sull'elemento ruotato. Un errore comune è mettere perspective sullo stesso elemento che si ruota — ciò non ha effetto. Spostarlo sul genitore, oppure usare la funzione perspective() all'interno di transform sull'elemento stesso.
L'ordine è importante con la funzione perspective(). Quando si usa la funzione, scriverla per prima: transform: perspective(500px) rotateX(40deg). Se elencata dopo la rotazione, si applica a un sistema di coordinate già ruotato e il risultato cambia.
Il 3D annidato richiede transform-style: preserve-3d. Senza di esso (il valore predefinito è flat), i nipoti vengono appiattiti nel piano del loro genitore e la profondità viene persa.

Proprietà correlate

perspective-origin — imposta la posizione del punto di fuga.
transform — applica le rotazioni e le traslazioni 3D a cui perspective conferisce profondità.
transform-style — mantiene gli elementi annidati nello spazio 3D condiviso.
backface-visibility — nasconde il retro di un elemento quando viene ruotato lontano dal visualizzatore.

Esercitazione

Pratica

Cosa fa la proprietà CSS 'perspective'?

Preimposta il colore di un elementoDetermina la distanza tra il piano z e l'utenteRegola lo spazio 3D di un elementoInfluisce sull'ombra di un elementoCrea la sensazione di profondità influenzando la scala di un elemento