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
selettore {
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:
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#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 %):
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#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):
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#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:
<div id="hover"></div>
<div id="elem"></div>
#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);
}
:
