Proprietà CSS transform-origin

Definizione e uso

L'attributo transform-origin ti permette di modificare la posizione dell'elemento trasformato.

Gli elementi di trasformazione 2D possono modificare l'asse x e y dell'elemento. Gli elementi di trasformazione 3D possono anche modificare l'asse Z.

Per capire meglio l'attributo transform-origin, vedere questoDimostrazione.

Utenti Safari/Chrome: Per capire meglio l'uso dell'attributo transform-origin per le trasformazioni 3D, vedere questoDimostrazione.

Nota:L'attributo deve essere utilizzato insieme a transform attributi insieme.

Per capire meglio l'attributo transform, guardare questoDimostrazione.

Vedi anche:

Corso CSS3:Traslazione 2D CSS3

Corso CSS3:Traslazione 3D CSS3

Manuale HTML DOM:Proprietà transformOrigin

Esempio

Imposta la posizione di partenza dell'elemento di rotazione:

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

Prova personalmente

Ci sono più esempi nella parte inferiore della pagina.

Sintassi CSS

transform-origin: ascissa X ascissa Y ascissa Z;

Valore dell'attributo

Valore Descrizione
ascissa X

Definisce dove viene posizionato il punto di vista sulla ascissa X. Valori possibili:

  • sinistra
  • centrale
  • destra
  • lunghezza
  • %
ascissa Y

Definisce dove viene posizionato il punto di vista sulla ascissa Y. Valori possibili:

  • superiore
  • centrale
  • inferiore
  • lunghezza
  • %
ascissa Z

Definisce dove viene posizionato il punto di vista sulla ascissa Z. Valori possibili:

  • lunghezza

Dettagli tecnici

Valore predefinito: 50% 50% 0
Ereditarietà: no
Versione: CSS3
Sintassi JavaScript: oggetto.style.transformOrigin="20% 40%"

Supporto del browser

I numeri nella tabella indicano la versione iniziale del browser che supporta completamente la proprietà.

I numeri con -webkit-、-moz- o -ms- indicano la versione iniziale con prefisso utilizzata.

Proprietà Chrome IE Firefox Safari Opera
transform-origin
(Grammatica a due valori)		 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
(Grammatica a tre valori)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-