Proprietà transform CSS

Definizione e utilizzo

L'attributo transform applica una trasformazione 2D o 3D all'elemento. Questo attributo ci permette di ruotare, ingrandire, spostare o inclinare l'elemento.

Per comprendere meglio l'attributo transform, consulta questaDimostrazione.

Vedi anche:

Corso CSS3:Trasformazione 2D CSS3

Corso CSS3:Trasformazione 3D CSS3

Manuale HTML DOM:Proprietà transform

Esempio

Rotare l'elemento div:

div
{
transform:rotate(7deg);
}

Prova personalmente

Più esempi sono disponibili nella parte inferiore della pagina.

Sintassi CSS

transform: none|funzioni-di-trasformazione;

Valore dell'attributo

Valore Descrizione test
nessuna Definire non effettuare alcuna trasformazione. test
matrix(n,n,n,n,n,n) Definire la trasformazione 2D, utilizzando una matrice di sei valori. test
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Definire la trasformazione 3D, utilizzando una matrice 4x4 di 16 valori.
traslare(x,y) definire la trasformazione 2D. test
traslare3d(x,y,z) definire la trasformazione 3D.
traslareX(x) definire la trasformazione, utilizzando solo il valore dell'asse X. test
traslareY(y) definire la trasformazione, utilizzando solo il valore dell'asse Y. test
traslareZ(z) definire la trasformazione 3D, utilizzando solo il valore dell'asse Z.
scala(x,y) definire la trasformazione di scala 2D. test
scala3d(x,y,z) definire la trasformazione di scala 3D.
scalaX(x) definire la trasformazione di scala impostando il valore dell'asse X. test
scalaY(y) definire la trasformazione di scala impostando il valore dell'asse Y. test
scalaZ(z) definire la trasformazione di scala 3D impostando il valore dell'asse Z.
ruotare(angolo) definire la rotazione 2D, specificando l'angolo nei parametri. test
ruotare3d(x,y,z,angolo) definire la rotazione 3D.
ruotareX(angolo) definire la rotazione 3D lungo l'asse X. test
ruotareY(angolo) definire la rotazione 3D lungo l'asse Y. test
ruotareZ(angolo) definire la rotazione 3D lungo l'asse Z. test
obliqua(angoloX,angoloY) definire la trasformazione obliqua 2D lungo gli assi X e Y. test
obliquaX(angolo) definire la trasformazione obliqua 2D lungo l'asse X. test
obliquaY(angolo) definire la trasformazione obliqua 2D lungo l'asse Y. test
prospettiva(n) definire la vista di prospettiva per gli elementi di trasformazione 3D. test

dettagli tecnici

valore predefinito: nessuna
ereditarietà: no
versione: CSS3
sintassi JavaScript: oggetto.style.transform="ruotare(7gradi)"

più esempi

immagine lanciata sulla tavola
Questo esempio dimostra come creare un'immagine di Polaroid e ruotare l'immagine.

supporto del browser

i numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

i numeri con -webkit-、-moz- o -ms- come prefisso rappresentano la versione iniziale utilizzata.

proprietà Chrome IE / Edge Firefox Safari Opera
transform (2D) 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 (3D) 36.0
12.0 -webkit-		 12.0 10.0 9.0
4.0 -webkit-		 23.0
15.0 -webkit-