Attributo Style transform

Definizione e uso

transform L'attributo applica trasformazioni 2D o 3D all'elemento. Questo attributo ti permette di ruotare, ingrandire, spostare, inclinare e fare altro ancora agli elementi.

Vedi anche:

Manuale di riferimento CSS:Proprietà transform

Esempio

Ruota l'elemento div:

document.getElementById("myDIV").style.transform = "rotate(7deg)";

Prova a farlo tu stesso

Sintassi

Restituisce la proprietà transform:

oggetto.style.transform

Imposta la proprietà transform:

oggetto.style.transform = "none|funzioni-trasformazione|initial|inherit"

Valore dell'attributo

Valore Descrizione
none Definisce che non ci dovrebbe essere alcuna trasformazione.
matrice(n, n, n, n, n, n) Definisce la trasformazione bidimensionale utilizzando una matrice di sei valori.
matrice3d(n, n, n, n, etc....) Definisce la trasformazione 3D utilizzando una matrice 4x4 di 16 valori.
traslare(x, y) Definisce la traslazione 2D.
traslare3d(x, y, z) Definisce la traslazione 3D.
traslareX(x) Definisce la traslazione utilizzando solo il valore dell'asse X.
traslareY(y) Definisce la traslazione utilizzando solo il valore dell'asse Y.
traslareZ(z) Definisce la traslazione 3D utilizzando solo il valore dell'asse Z.
proporzioni(x, y) Definisce la trasformazione di proporzioni 2D.
proporzioni3d(x, y, z) Definisce la trasformazione di proporzioni 3D.
proporzioniX(x) Definisce la trasformazione di proporzioni assegnando un valore all'asse X.
proporzioniY(y) Definisce la trasformazione di proporzioni assegnando un valore all'asse Y.
proporzioniZ(z) Definisce la trasformazione di proporzioni 3D assegnando un valore all'asse Z.
ruotare(angle) Definisce la rotazione 2D, specificando l'angolo nei parametri.
ruotare3d(x, y, z, angle) Definisce la rotazione 3D.
ruotareX(angle) Definisce la rotazione 3D lungo l'asse X.
ruotareY(angle) Definisce la rotazione 3D lungo l'asse Y.
ruotareZ(angle) Definisce la rotazione 3D lungo l'asse Z.
inclinazione(x-angle, y-angle) Definisce la trasformazione di inclinazione 2D lungo gli assi X e Y.
inclinazioneX(angle) Definisce la trasformazione di inclinazione 2D lungo l'asse X.
inclinazioneY(angle) Definisce la trasformazione di inclinazione 2D lungo l'asse Y.
prospettiva(n) Definisce la prospettiva dell'elemento di trasformazione 3D.
initial Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit Inherita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: Nessuno
Valore di ritorno: Stringa che rappresenta l'elemento Proprietà transform.
Versione di CSS: CSS3

Supporto del browser

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0