W3docs
it
Accedi

Proprietà CSS transform-origin

Come usare la proprietà CSS transform-origin per modificare il punto di trasformazione di un elemento. Funzioni e esempi pratici.

La proprietà CSS transform-origin imposta il punto attorno al quale un elemento viene trasformato — il perno per le rotazioni, l'ancoraggio per il ridimensionamento e il punto di riferimento per la distorsione (skew).

Per impostazione predefinita, ogni trasformazione avviene attorno al centro dell'elemento (50% 50%). Ruota un riquadro e girerà sul proprio centro; ridimensionalo e crescerà in tutte le direzioni. transform-origin permette di spostare quel perno ovunque — in un angolo, su un bordo o anche in un punto esterno al riquadro — in modo che la stessa trasformazione produca un movimento completamente diverso.

Questa pagina illustra la sintassi, il comportamento dei valori keyword, percentuale e lunghezza, il valore opzionale per l'asse z nelle trasformazioni 3D, e vari esempi eseguibili.

Perché transform-origin è importante

Una rotazione appare molto diversa a seconda di dove si trova il suo perno. Immagina la lancetta di un orologio: ruotarla attorno al proprio centro descrive un piccolo cerchio, ma ruotarla attorno alla sua base fa scorrere la punta sull'intero quadrante — stesso rotate(), origine diversa.

Ecco perché transform-origin è essenziale per:

  • Movimenti a cerniera o a porta — ruota attorno a un bordo anziché al centro.
  • Ridimensionamento da un angolo — fai crescere un menu dal suo angolo in alto a sinistra invece che dal centro.
  • Flip 3D di schede — abbinalo all'offset z e alla proprietà perspective.

La proprietà transform-origin ha effetto solo quando viene applicata una funzione di trasformazione tramite la proprietà transform — da sola non fa nulla. È una delle proprietà CSS3.

Riepilogo della sintassi

Il valore può essere specificato con:

  • Keyword di offset — left, center, right, top, bottom (es. top left).
  • Lunghezze — misurate dall'angolo in alto a sinistra dell'elemento (es. 0 0, 80px 40px).
  • Percentuali — relative alla dimensione propria dell'elemento (es. 0% 0% corrisponde all'angolo in alto a sinistra, 100% 100% all'angolo in basso a destra).

Se si fornisce un solo valore, il secondo assume il valore predefinito center. Un terzo valore imposta la posizione sull'asse z ed è rilevante solo per le trasformazioni 3D.

Informazione

In passato il prefisso -webkit- era utilizzato per Safari, Chrome e le versioni più vecchie di Opera. I browser moderni non richiedono più prefissi vendor per questa proprietà.

Valore iniziale50% 50% 0
Si applica aElementi trasformabili.
EreditataNo.
AnimabileSì. Il grado è animabile.
VersioneCSS3
Sintassi DOMObject.style.transform-origin = "10% 30%";

Sintassi

Valori CSS di transform-origin

transform-origin: x-offset y-offset z-offset | initial | inherit;

Esempio della proprietà transform-origin:

Esempio di codice CSS transform-origin

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .big {
        position: relative;
        height: 300px;
        width: 300px;
        margin: 80px;
        padding: 5px;
        border: 2px solid #666666;
        background-color: #eeeeee;
      }
      .little {
        padding: 60px;
        position: absolute;
        border: 2px solid #666666;
        background-color: #8ebf42;
        -webkit-transform: rotate(35deg);
        -webkit-transform-origin: 70% 90%;
        transform: rotate(35deg);
        transform-origin: 70% 90%;
      }
    </style>
  </head>
  <body>
    <h2>Transform-origin property example</h2>
    <div class="big">
      <div class="little">Box</div>
    </div>
  </body>
</html>
Provalo tu stesso »

Risultato

CSS transform-origin

Il riquadro piccolo è ruotato di 35°, ma poiché transform-origin è 70% 90% (area in basso a destra), ruota attorno a quel punto anziché al suo centro.

L'esempio successivo ruota quattro riquadri identici dello stesso 25deg e cambia solo transform-origin, così puoi vedere fianco a fianco come ciascun valore sposta il perno.

Esempio di transform-origin con quattro valori:

Altro esempio di codice CSS transform-origin

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #eeeeee;
        font-size: 1.1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .container {
        margin: 10px auto;
        max-width: 700px;
      }
      .wrap {
        width: 150px;
        height: 150px;
        border: 2px solid #666666;
        display: inline-block;
        margin: 100px;
      }
      .box {
        width: 150px;
        height: 150px;
        position: relative;
        color: #eeeeee;
        text-align: center;
        line-height: 150px;
        -webkit-transform: rotate(25deg);
        transform: rotate(25deg);
      }
      .a {
        background-color: #0747af;
      }
      .b {
        background-color: #40b530;
        -webkit-transform-origin: top left;
        transform-origin: top left;
      }
      .c {
        background-color: #666666;
        -webkit-transform-origin: 90% 120%;
        transform-origin: 90% 120%;
      }
      .d {
        background-color: #ffdb11;
        -webkit-transform-origin: 80px 40px;
        transform-origin: 80px 40px;
      }
    </style>
  </head>
  <body>
    <h2>Transform-origin property example</h2>
    <div class="container">
      <div class="wrap">
        <div class="box a">
          50% 50%
        </div>
      </div>
      <div class="wrap">
        <div class="box b">
          top left
        </div>
      </div>
      <div class="wrap">
        <div class="box c">
          90% 120%
        </div>
      </div>
      <div class="wrap">
        <div class="box d">
          80px 40px
        </div>
      </div>
    </div>
  </body>
</html>
Provalo tu stesso »

Analizzando i quattro riquadri: 50% 50% ruota sul centro, top left ruota sull'angolo in alto a sinistra, 90% 120% utilizza un punto sotto e a destra del riquadro, e 80px 40px misura il perno in pixel dall'angolo in alto a sinistra.

L'offset z per le trasformazioni 3D

Il terzo valore sposta il perno lungo l'asse z (verso o lontano dal visualizzatore). Ha un effetto visibile solo con funzioni di trasformazione 3D come rotateX() o rotateY(), e deve essere una lunghezza — le percentuali non sono consentite per il valore z.

.card {
  /* pivot at the center, pushed 50px toward the viewer */
  transform: rotateY(45deg);
  transform-origin: center center 50px;
}

Perché l'effetto 3D sia visibile, il genitore di solito necessita di un valore perspective (e puoi spostare il punto di fuga con perspective-origin).

Valori

ValoreDescrizione
x-offsetSpecifica la posizione orizzontale. Accetta keyword (left, center, right), lunghezze o percentuali.
y-offsetSpecifica la posizione verticale. Accetta keyword (top, center, bottom), lunghezze o percentuali.
z-offsetSpecifica la posizione di profondità lungo l'asse z per le trasformazioni 3D. Accetta valori di lunghezza.
initialImposta questa proprietà al suo valore predefinito.
inheritEredita questa proprietà dall'elemento genitore.

Consigli e insidie

  • Da sola non fa nulla. Se transform-origin sembra non avere effetto, verifica che l'elemento abbia anche un valore transform — senza di esso non c'è nulla attorno a cui ruotare.
  • Le percentuali sono relative all'elemento stesso, non al suo genitore: 100% 0% corrisponde all'angolo in alto a destra dell'elemento stesso.
  • L'ordine è x poi y, quindi top left e left top sono equivalenti (le keyword sono indipendenti dall'ordine), ma 0% 100% (angolo in basso a sinistra) e 100% 0% (angolo in alto a destra) non lo sono.
  • Anima le trasformazioni, non l'origine, per un movimento fluido. Cambiare transform-origin durante un'animazione fa saltare l'elemento, quindi imposta l'origine una volta sola e anima la transition o l'animation su transform.

Proprietà correlate

Esercitazione

Pratica
La proprietà transform-origin funziona solo con
La proprietà transform-origin funziona solo con
Was this page helpful?