Proprietà CSS transform

La proprietà CSS transform ti permette di riposizionare, ridimensionare, ruotare o distorcere visivamente un elemento senza influenzare il layout circostante. È una delle proprietà CSS3 e accetta la parola chiave none oppure una o più funzioni di trasformazione — ad esempio rotate(), scale(), translate() o skew().

Un aspetto fondamentale da capire: una trasformazione cambia il modo in cui un elemento viene disegnato, ma lo spazio che occupava originariamente nel flusso del documento rimane invariato. Gli elementi adiacenti non vengono ridisposti quando trasformi un elemento, ed è proprio per questo che le trasformazioni sono economiche da animare — il browser può delegarle alla GPU.

Questa pagina tratta la sintassi, l'intero set di funzioni di trasformazione 2D e 3D, come il punto attorno al quale un elemento si trasforma (transform-origin) influisce sul risultato, e come le trasformazioni si abbinano a transitions e animations per il movimento.

Informazione

Le trasformazioni si applicano agli elementi trasformabili — box block, flex, grid e inline-block, più gli elementi SVG. Non si applicano agli elementi inline non sostituiti come un semplice <span> (assegnagli prima display: inline-block).

Puoi concatenare più funzioni in una sola dichiarazione. Vengono applicate da destra a sinistra, quindi la funzione più a destra viene eseguita per prima:

/* first rotate, then translate the rotated box */
transform: translate(10px, 40px) rotate(50deg);

Valore iniziale	none
Si applica a	Elementi trasformabili.
Ereditato	No.
Animabile	Sì.
Versione	CSS3
Sintassi DOM	Object.style.transform = "rotate(10deg)";

Sintassi

Valori CSS transform

transform: none | transform-functions | initial | inherit;

Esempio della proprietà transform:

Esempio di codice CSS transform

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 2px dashed #666;
        background-color: #8ebf42;
        transform: translate(10px, 40px) rotate(50deg);
        width: 130px;
        height: 80px;
      }
    </style>
  </head>
  <body>
    <h2>Transform property example</h2>
    <div>An element</div>
  </body>
</html>

Provalo tu stesso »

Risultato

Esempio con più funzioni di trasformazione

Esempio CSS transform con più valori

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin: 35px 20px;
      }
      div.box1 {
        width: 130px;
        height: 80px;
        border: 1px solid #000;
        background-color: #1c87c9;
        transform: rotate(30deg);
      }
      div.box2 {
        width: 120px;
        height: 80px;
        border: 1px solid #000;
        background-color: #8ebf42;
        transform: skewY(30deg);
      }
      div.box3 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #FFFF00;
        transform: scaleY(1.5);
      }
      div.box4 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #ccc;
        transform: rotate(160deg);
      }
      div.box5 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #990099;
        transform: translateX(50px);
      }
      div.box6 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #FF0000;
        transform: skew(170deg, 170deg);
      }
    </style>
  </head>
  <body>
    <h2>Transform property example</h2>
    <h3>transform: rotate(30deg):</h3>
    <div class="box1"></div>
    <h3>transform: skewY(30deg):</h3>
    <div class="box2"></div>
    <h3>transform: scaleY(1.5):</h3>
    <div class="box3"></div>
    <h3>transform: rotate(160deg):</h3>
    <div class="box4"></div>
    <h3>transform: translateX(50px):</h3>
    <div class="box5"></div>
    <h3>transform: skew(170deg,170deg):</h3>
    <div class="box6"></div>
  </body>
</html>

Provalo tu stesso »

Funzioni di trasformazione

translate()

translate(tx, ty) sposta un elemento lateralmente e su/giù senza influenzare gli altri elementi. tx è lo spostamento orizzontale, ty quello verticale; un ty positivo muove l'elemento verso il basso. Usa translateX() o translateY() per un singolo asse. Poiché non attiva il layout, translate() è il metodo preferito per spostare un elemento nelle animazioni:

transform: translate(50px, 20px); /* right 50px, down 20px */
transform: translateX(-30px);     /* left 30px */

scale()

scale(x, y) ridimensiona un elemento rispetto alla sua dimensione corrente. 1 lo lascia invariato, 2 lo raddoppia, 0.5 lo dimezza e un valore negativo lo specchia. Passa un solo argomento per scalare entrambi gli assi in modo uniforme:

transform: scale(1.5);   /* 150% in both directions */
transform: scale(2, 0.5);/* twice as wide, half as tall */

rotate()

rotate(angle) fa ruotare un elemento attorno alla sua origine. Un angolo positivo ruota in senso orario, uno negativo in senso antiorario. L'angolo si esprime in deg, rad, grad o turn:

transform: rotate(45deg);
transform: rotate(-0.25turn); /* same as rotate(-90deg) */

skew()

skew(ax, ay) inclina (distorce) un elemento lungo gli assi x e y. skewX() e skewY() inclinano lungo un singolo asse. Un'inclinazione di 0deg lascia l'asse invariato:

transform: skewX(20deg);
transform: skew(20deg, 10deg);

matrix()

matrix(a, b, c, d, e, f) combina ogni trasformazione 2D — scala, inclinazione, rotazione e traslazione — in un'unica funzione. Raramente la si scrive a mano; i browser la calcolano internamente ed è la forma che compare quando si legge uno stile calcolato.

transform-origin

Per impostazione predefinita ogni trasformazione ruota attorno al centro dell'elemento. La proprietà transform-origin modifica quel punto di ancoraggio, il che cambia radicalmente il risultato di un rotate() o scale(). Ad esempio, transform-origin: top left fa sì che rotate(45deg) faccia ruotare l'elemento attorno al suo angolo in alto a sinistra invece che al centro.

Trasformazioni 2D e 3D

Le funzioni descritte sopra operano nel piano 2D. Le loro controparti 3D — translateZ(), rotateX(), rotateY(), rotate3d() e così via — spostano e ruotano gli elementi lungo l'asse z (verso o lontano dallo spettatore). Le trasformazioni 3D appaiono tridimensionali solo quando viene applicata una perspective all'elemento o al suo genitore; senza prospettiva, un rotateY() appare semplicemente come uno schiacciamento orizzontale dell'elemento.

Animare le trasformazioni

La proprietà transform è animabile, quindi è il cavallo di battaglia del movimento fluido nelle interfacce utente. Combinala con una transition per effetti hover, o con un'animation e i keyframe per movimenti continui:

.card {
  transition: transform 0.3s ease;
}
.card:hover {
  transform: scale(1.05) translateY(-4px);
}

Valori

Valore	Descrizione	Prova
none	Nessuna trasformazione applicata.	Prova »
translate()	Trasla l'elemento tramite un vettore [tx, ty]. Tx è la traslazione lungo l'asse x. Ty è la traslazione lungo l'asse y.	Prova »
translateX()	Trasla l'elemento lungo l'asse x.	Prova »
translateY()	Trasla l'elemento lungo l'asse y.	Prova »
scale(x, y)	Scala un elemento verso l'alto o verso il basso.	Prova »
scaleX()	Scala un elemento lungo l'asse x.	Prova »
scaleY()	Scala un elemento lungo l'asse y.	Prova »
rotate(angle)	Ruota un elemento nello spazio bidimensionale. L'angolo è specificato nel parametro.	Prova »
skew()	Definisce una trasformazione di inclinazione 2D lungo l'asse x e l'asse y.	Prova »
skewX()	Definisce una trasformazione di inclinazione 2D lungo l'asse x.	Prova »
skewY()	Definisce una trasformazione di inclinazione 2D lungo l'asse y.	Prova »
matrix()	Definisce una trasformazione 2D usando una matrice di sei valori.	Prova »
translateZ()	Trasla un elemento della quantità specificata lungo l'asse z.
translate3d()	Definisce una traslazione tridimensionale.
scaleZ()	Scala un elemento nella terza dimensione, lungo l'asse z.
scale3d()	Definisce una trasformazione di scala tridimensionale.
rotateX()	Ruota un elemento attorno all'asse x nello spazio tridimensionale.	Prova »
rotateY()	Ruota un elemento attorno all'asse y nello spazio tridimensionale.	Prova »
rotateZ()	Ruota un elemento attorno all'asse z nello spazio tridimensionale.	Prova »
rotate3d()	Definisce una trasformazione di rotazione tridimensionale.
matrix3d()	Definisce una trasformazione 3D usando una matrice 4x4 di 16 valori.
perspective()	Definisce una vista prospettica per l'elemento tridimensionale.
initial	Fa sì che la proprietà usi il suo valore predefinito.
inherit	Eredita la proprietà dall'elemento genitore.

Esercitati

Pratica

Quale affermazione è errata riguardo alla proprietà transform?

Può essere applicata agli elementi trasformabili.La proprietà transform consente di ruotare, scalare, inclinare o traslare l'elemento.Specifica solo la trasformazione bidimensionale dell'elemento.