Proprietà transform-origin

La proprietà transform-origin imposta il punto, rispetto al quale avverranno le trasformazioni dell'elemento, definite dalla proprietà transform. Per impostazione predefinita questo punto è il centro dell'elemento, e, ad esempio, la rotazione avverrà rispetto al suo centro. Tuttavia, questo comportamento può essere modificato e forzare l'elemento a ruotare rispetto al suo lato, angolo o addirittura rispetto a un punto che si trova al di fuori dell'elemento.

Sintassi

cssselettore {
  transform-origin: X-axis Y-axis Z-axis;
}

I valori per gli assi Y e Z non sono obbligatori, possono essere omessi (assumeranno i valori predefiniti). Lo spostamento del punto lungo l'asse Z è necessario per trasformazioni 3D.

Valori per l'asse X

Valore	Descrizione
Unità CSS	Il valore può essere qualsiasi unità di misura per dimensioni, che imposta l'offset del centro di trasformazione dal bordo sinistro dell'elemento. Un valore positivo sposta il centro di trasformazione verso destra (all'interno dell'elemento), mentre uno negativo - verso sinistra (al di fuori dell'elemento) rispetto al bordo sinistro dell'elemento.
`left`	Punto di rotazione orizzontale sul bordo sinistro dell'elemento.
`right`	Punto di rotazione orizzontale sul bordo destro dell'elemento.
`center`	Punto di rotazione orizzontale al centro dell'elemento.

Valore predefinito: center.

Valori per l'asse Y

Valore	Descrizione
Unità CSS	Il valore può essere qualsiasi unità di misura per dimensioni, che imposta l'offset del centro di trasformazione dal bordo superiore dell'elemento. Un valore positivo sposta il centro di trasformazione verso il basso (all'interno dell'elemento), mentre uno negativo - verso l'alto (al di fuori dell'elemento) rispetto al bordo superiore dell'elemento.
`top`	Punto di rotazione verticale sul bordo superiore dell'elemento.
`bottom`	Punto di rotazione verticale sul bordo inferiore dell'elemento.
`center`	Punto di rotazione verticale al centro dell'elemento.

Valore predefinito: center.

Valori per l'asse Z

Valore	Descrizione
Unità CSS	Il valore può essere qualsiasi unità di misura per dimensioni, che imposta l'offset del centro di trasformazione dal piano dell'elemento. Un valore positivo lo sposta verso di noi (dal piano dello schermo), mentre uno negativo lontano da noi.

Valore predefinito: 0px.

Esempio

Ora il valore della proprietà transform-origin non è impostato e il blocco ruoterà rispetto al suo centro. Passa il mouse sul blocco per vedere l'effetto:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: center center;
  transform: rotate(30deg);
}

Результат:

Esempio

E ora al passaggio del mouse il blocco ruoterà rispetto all'angolo superiore sinistro:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: 0px 0px;
  transform: rotate(30deg);
}

Результат:

Esempio

E ora al passaggio del mouse il blocco ruoterà rispetto all'angolo inferiore destro. Per fare ciò è necessario spostare il punto di trasformazione a 100% a destra e a 100% in basso (si potrebbero impostare anche i px, ma cambiando le dimensioni dell'elemento il punto di trasformazione rimarrebbe al suo posto, quindi è meglio usare %):

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: 100% 100%;
  transform: rotate(30deg);
}

Результат:

Esempio

Ruotiamo il blocco rispetto all'angolo superiore destro:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: 100% 0%;
  transform: rotate(30deg);
}

Результат:

Esempio

Ruotiamo il blocco rispetto al centro del lato sinistro. Per fare ciò, per l'asse X impostiamo left (il punto di rotazione sarà a sinistra), e per l'asse Y - center (il punto di rotazione sarà al centro verticalmente):

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: left center;
  transform: rotate(30deg);
}

Результат:

Esempio

La proprietà può essere impostata non solo per la rotazione, ma anche per altre trasformazioni. Aumentiamo la scala utilizzando scale, specificando il punto di trasformazione come angolo inferiore sinistro:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: left bottom;
  transform: scale(1.5);
}

Результат:

Esempio

E ora specifichiamo il punto di trasformazione come angolo superiore destro:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: right top;
  transform: scale(1.5);
}

Результат:

Esempio

Il punto di trasformazione può essere impostato anche al di fuori dell'elemento. Nel prossimo esempio, passando il mouse sul blocco rosso, il blocco nero effettuerà una rotazione rispetto a un punto che si trova all'esterno:

html<div id="hover"></div>
<div id="elem"></div>

css#hover {
  border: 1px solid red;
  width: 50px;
  height: 50px;
}
#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
  transition: transform 1s;
  transform-origin: -100px -100px;
}
#hover:hover + #elem {
  transform: rotate(30deg);
}

Результат: