W3docs
it
Accedi

Proprietà CSS perspective-origin

Usa la proprietà CSS perspective-origin per decidere da quale prospettiva l'elemento deve essere mostrato all'utente. Valori ed esempi.

La proprietà CSS perspective-origin imposta la posizione da cui il visualizzatore sembra guardare un elemento trasformato in 3D. In altre parole, sposta il punto di fuga — il punto verso cui convergono le facce inclinate rispetto allo schermo. È una delle proprietà CSS3.

Come funziona

Una scena 3D ha bisogno di due ingredienti per apparire corretta:

  1. La proprietà perspective, che definisce quanto è intenso l'effetto 3D (minore è il valore, più accentuato è l'accorciamento prospettico).
  2. La proprietà perspective-origin, che determina dove si trova la telecamera. perspective decide la profondità del punto di fuga; perspective-origin ne decide la posizione orizzontale e verticale.

Per impostazione predefinita il punto di fuga si trova esattamente al centro dell'elemento (50% 50%), quindi la faccia ruotata di un elemento figlio appare simmetrica. Spostare perspective-origin su un lato equivale a camminare intorno all'oggetto: lo stesso elemento figlio sembrerà visto da sinistra, da destra, dall'alto o dal basso.

perspective-origin ha effetto solo quando è impostata anche perspective, sullo stesso elemento o su un antenato. Senza di essa, la proprietà viene analizzata ma non produce alcun effetto.

La sintassi a due valori segue sempre l'ordine orizzontale prima, verticale dopo (ad esempio perspective-origin: 25% 75%). Se si fornisce un solo valore, quello mancante assume il valore predefinito center. Le coppie di parole chiave come top left costituiscono un'eccezione: le parole chiave possono essere scritte in qualsiasi ordine perché ciascuna indica un asse specifico.

Informazione

perspective-origin viene applicata all'elemento genitore ma determina come i suoi figli vengono proiettati — l'elemento a cui viene applicata non è trasformato direttamente.

Valore iniziale50% 50%
Si applica aElementi trasformabili.
EreditatoNo.
AnimabileSì. La trasformazione della prospettiva è animabile.
VersioneCSS3
Sintassi DOMobject.style.perspectiveOrigin = "20px 70%";

Sintassi

Sintassi CSS di perspective-origin

perspective-origin: x-position y-position | x | y | closest-side | farthest-side | initial | inherit;

Esempio della proprietà perspective-origin:

Esempio di codice CSS perspective-origin

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 60px;
        border: 1px solid #666;
        perspective: 130px;
        perspective-origin: 50% 50%;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: 50% 50%:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>
Provalo tu stesso »

Risultato

CSS perspective-origin centrato (50% 50%)

Con il valore predefinito 50% 50%, il punto di fuga è centrato, quindi il Box2 ruotato appare uniformemente accorciato. Negli esempi successivi spostiamo quel punto verso un bordo e osserviamo come cambia l'angolo di visione apparente.

Esempio della proprietà perspective-origin con il valore "left":

Esempio CSS perspective-origin con valore left

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 20px;
        border: 1px solid #666;
        perspective: 80px;
        perspective-origin: left;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: left:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>
Provalo tu stesso »

Esempio della proprietà perspective-origin con il valore "right":

Esempio CSS perspective-origin con valore right

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 160px;
        border: 1px solid #666;
        perspective: 80px;
        perspective-origin: right;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: right:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>
Provalo tu stesso »

Esempio della proprietà perspective-origin definita come "bottom right":

Esempio CSS perspective-origin con valore bottom

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 60px;
        border: 1px solid #666;
        perspective: 130px;
        perspective-origin: bottom right;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: bottom right:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>
Provalo tu stesso »

Valori

ValoreDescrizione
x-positionLa posizione orizzontale del punto di fuga. Accetta un valore <length>, una percentuale o una delle parole chiave left (= 0), center (= 50%) o right (= 100%).
y-positionLa posizione verticale del punto di fuga. Accetta un valore <length>, una percentuale o una delle parole chiave top (= 0), center (= 50%) o bottom (= 100%).
initialImposta questa proprietà al suo valore predefinito (50% 50%).
inheritEredita questa proprietà dall'elemento genitore.

I valori percentuali e di lunghezza vengono risolti rispetto al box dell'elemento stesso, con l'origine nell'angolo in alto a sinistra. Quindi 0 0 posiziona il punto di fuga in alto a sinistra, 100% 100% in basso a destra, e sono ammessi valori negativi o superiori al 100% per spostare la telecamera al di fuori del box.

Supporto browser

perspective-origin è supportata in tutti i browser moderni. Non è più necessario utilizzare prefissi vendor come -webkit-perspective-origin per le versioni attuali di Chrome, Edge, Firefox e Safari.

Proprietà correlate

  • perspective — imposta la distanza dal punto di fuga ed è obbligatoria affinché perspective-origin abbia effetto.
  • transform — applica le trasformazioni rotateX, rotateY e translateZ a cui viene applicata la prospettiva.
  • transform-style — usa preserve-3d affinché gli elementi figli annidati mantengano le proprie posizioni 3D all'interno della prospettiva.
  • backface-visibility — controlla se il lato rovesciato di un elemento ruotato viene mostrato.

Esercitazione

Pratica
Cosa fa la proprietà CSS 'perspective-origin'?
Cosa fa la proprietà CSS 'perspective-origin'?
Was this page helpful?