Proprietà CSS di origine di trasformazione

Imposta il posizionamento di base di un elemento ruotato:

div {
transform: rotate(45deg);
transform-origin: 20% 40%;
}

Definizione e utilizzo

La transform-originproprietà consente di modificare la posizione degli elementi trasformati.

Le trasformazioni 2D possono modificare l'asse xey di un elemento. Le trasformazioni 3D possono anche modificare l'asse z di un elemento.

Per comprendere meglio l' transform-originimmobile, guarda una demo .

Nota: questa proprietà deve essere utilizzata insieme alla proprietà di trasformazione .

Suggerimento: per comprendere meglio questa proprietà per le trasformazioni 3D , visualizzare una demo .

Valore di default:	50% 50% 0
Ereditato:	no
Animabile:	sì. Leggi su animabile
Versione:	CSS3
sintassi JavaScript:	oggetto .style.transformOrigin="0 0"

I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.

I numeri seguiti da -webkit-, -moz- o -o- specificano la prima versione che ha funzionato con un prefisso.

Property
transform-origin (two-value syntax)	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.0 3.5 -moz-	9.0 3.2 -webkit-	23.0 15.0 -webkit- 10.5 -o-
transform-origin (three-value syntax)	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-

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

Property Value	Description
x-axis	Defines where the view is placed at the x-axis. Possible values: left center right length %
y-axis	Defines where the view is placed at the y-axis. Possible values: top center bottom length %
z-axis	Defines where the view is placed at the z-axis (for 3D transformations). Possible values: length
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit