Guida CSS interattiva: Transform

Q: Come applico più trasformazioni in CSS?

Elencale in un solo valore transform, separate da spazi: transform: translateX(50px) rotate(20deg) scale(1.2);. Scrivere una seconda dichiarazione transform sostituisce la prima invece di aggiungersi.

Cosa fa transform

transform cambia il modo in cui un elemento viene disegnato: spostato, ridimensionato, ruotato o inclinato. I contorni tratteggiati qui sotto mostrano dove sarebbe ogni riquadro senza la sua trasformazione:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform functions</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 40px; padding: 30px 20px; }
    .slot { outline: 2px dashed #9ca3af; width: 90px; height: 60px; }
    .box { width: 90px; height: 60px; background: #2563eb; color: white; display: grid; place-items: center; }
    .t1 { transform: translate(20px, 10px); }
    .t2 { transform: scale(1.3); background: #16a34a; }
    .t3 { transform: rotate(20deg); background: #f59e0b; color: #111827; }
    .t4 { transform: skewX(-20deg); background: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div class="slot"><div class="box t1">translate</div></div>
    <div class="slot"><div class="box t2">scale</div></div>
    <div class="slot"><div class="box t3">rotate</div></div>
    <div class="slot"><div class="box t4">skewX</div></div>
  </div>
</body>
</html>

translate(20px, 10px) sposta il riquadro blu di 20px in avanti e 10px in basso. scale(1.3) rende quello verde più grande del 30% attorno al suo centro. rotate(20deg) ruota quello ambra in senso orario, e skewX(-20deg) inclina quello scuro. In ogni caso lo spazio tratteggiato, cioè lo spazio che l'elemento occupa nel layout, resta esattamente dov'era.

Le funzioni di trasformazione

Funzione	Cosa fa	Esempio
`translate(x, y)`	sposta	`translate(20px, -10px)`, `translate(-50%, -50%)`
`translateX(x)` / `translateY(y)`	sposta su un asse	`translateY(-4px)`
`scale(s)` / `scale(x, y)`	ridimensiona (1 = originale, 0.5 = metà, negativo specchia)	`scale(1.1)`, `scale(-1, 1)`
`scaleX(s)` / `scaleY(s)`	ridimensiona su un asse	`scaleX(0.5)`
`rotate(angle)`	ruota in senso orario (negativo = antiorario)	`rotate(45deg)`, `rotate(0.25turn)`
`skew(x, y)` / `skewX(a)` / `skewY(a)`	inclina	`skewX(-15deg)`
`matrix(a, b, c, d, e, f)`	tutto quanto sopra in un'unica matrice, di solito è ciò che il browser restituisce
`none`	nessuna trasformazione

Le percentuali in translate() sono relative alla dimensione dell'elemento stesso, non a quella del genitore. La rotazione ha una pagina tutta sua con gradi, giri e rotazioni continue: CSS rotate.

Playground di transform

Muovi i cursori. La prima riga è il valore di transform che hai costruito; la seconda è la matrice calcolata dal browser a partire da esso, cioè ciò che getComputedStyle restituisce per qualsiasi trasformazione:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .controls { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 16px; }
    .stage { height: 170px; display: grid; place-items: center; background: #f3f4f6; margin: 10px 0; overflow: hidden; }
    #box { width: 80px; height: 80px; background: #2563eb; color: white; display: grid; place-items: center; border-radius: 6px; }
    code { display: block; }
  </style>
</head>
<body>
  <div class="controls">
    <label>translateX <input type="range" data-f="translateX" data-u="px" min="-120" max="120" value="0"></label>
    <label>scale <input type="range" data-f="scale" data-u="" min="0.5" max="1.8" step="0.1" value="1"></label>
    <label>rotate <input type="range" data-f="rotate" data-u="deg" min="-180" max="180" value="0"></label>
    <label>skewX <input type="range" data-f="skewX" data-u="deg" min="-40" max="40" value="0"></label>
  </div>
  <div class="stage"><div id="box">Box</div></div>
  <code id="value"></code>
  <code id="matrix"></code>
  <script>
    const box = document.getElementById('box');
    const inputs = document.querySelectorAll('input');
    const update = () => {
      const t = [...inputs].map((i) => i.dataset.f + '(' + i.value + i.dataset.u + ')').join(' ');
      box.style.transform = t;
      document.getElementById('value').textContent = 'transform: ' + t + ';';
      document.getElementById('matrix').textContent = 'computed: ' + getComputedStyle(box).transform;
    };
    inputs.forEach((i) => i.addEventListener('input', update));
    update();
  </script>
</body>
</html>

Le trasformazioni non spostano il layout

Un elemento trasformato viene disegnato altrove, ma la pagina viene impaginata come se non fosse trasformato. I suoi vicini mantengono la loro posizione. È questo che rende le trasformazioni adatte agli effetti hover e alle animazioni: niente intorno deve essere reimpaginato.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>No reflow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 10px; padding: 24px 10px; }
    .row div { width: 80px; height: 50px; background: #e5e7eb; display: grid; place-items: center; }
    .row .grow-t { transform: scale(1.5); background: #16a34a; color: white; }
    .row .grow-w { width: 120px; height: 75px; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="row" id="a"><div>A</div><div class="grow-t">scale(1.5)</div><div id="c1">C</div></div>
  <div class="row" id="b"><div>A</div><div class="grow-w">width 120px</div><div id="c2">C</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'C starts at x = ' + document.getElementById('c1').offsetLeft + 'px next to the scaled box, and at x = ' +
      document.getElementById('c2').offsetLeft + 'px next to the resized one.';
  </script>
</body>
</html>

Entrambi i riquadri centrali sembrano 1,5 volte più grandi. Quello scalato si sovrappone ai vicini e C resta dov'è; quello ingrandito con width e height spinge C 40px più in là.

Più trasformazioni e il loro ordine

Metti più funzioni in un solo transform, separate da spazi. L'ordine cambia il risultato, perché, leggendo da sinistra a destra, ogni funzione lavora nel sistema di coordinate lasciato dalle funzioni precedenti:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform order</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .stage { position: relative; height: 170px; background: #f3f4f6; }
    .box { position: absolute; top: 20px; left: 20px; width: 60px; height: 40px; opacity: 0.85; }
    .a { transform: translateX(120px) rotate(45deg); background: #2563eb; }
    .b { transform: rotate(45deg) translateX(120px); background: #16a34a; }
  </style>
</head>
<body>
  <div class="stage"><div class="box a"></div><div class="box b"></div></div>
  <p id="out"></p>
  <script>
    const center = (el) => { const r = el.getBoundingClientRect(); return Math.round(r.left + r.width / 2) + ', ' + Math.round(r.top + r.height / 2); };
    document.getElementById('out').textContent =
      'blue (translate then rotate) center: ' + center(document.querySelector('.a')) +
      '  |  green (rotate then translate) center: ' + center(document.querySelector('.b'));
  </script>
</body>
</html>

Il riquadro blu si è spostato di 120px in linea retta e poi è stato ruotato sul posto. Il riquadro verde è stato ruotato prima, quindi il suo "asse x" punta in diagonale, e translateX(120px) lo sposta lungo la diagonale. Stesse funzioni, posizione diversa.

L'altra trappola: una seconda dichiarazione transform sostituisce la prima. Se una card ha transform: rotate(-2deg) e la sua regola hover dice transform: scale(1.05), la rotazione sparisce in hover. Ripetile entrambe (rotate(-2deg) scale(1.05)), oppure usa le proprietà individuali descritte più avanti.

transform-origin

Ridimensionamento, rotazione e inclinazione avvengono attorno a un punto fisso, l'origine della trasformazione, che per impostazione predefinita è il centro. Cambiala con parole chiave, lunghezze o percentuali:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transform-origin</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 50px; padding: 20px 30px 40px; }
    .slot { outline: 2px dashed #9ca3af; width: 80px; height: 50px; }
    .box { width: 80px; height: 50px; background: #2563eb; transform: rotate(25deg); }
    .tl { transform-origin: top left; }
    .br { transform-origin: bottom right; }
  </style>
</head>
<body>
  <div class="row">
    <div><code>center</code><div class="slot"><div class="box"></div></div></div>
    <div><code>top left</code><div class="slot"><div class="box tl"></div></div></div>
    <div><code>bottom right</code><div class="slot"><div class="box br"></div></div></div>
  </div>
</body>
</html>

Tutti e tre i riquadri ruotano di 25 gradi. Il primo ruota attorno al suo centro, il secondo tiene l'angolo in alto a sinistra fissato all'angolo del suo spazio, il terzo l'angolo in basso a destra. Un menu a tendina che cresce dal suo pulsante usa transform-origin: top con scale().

Le proprietà translate, scale e rotate

I browser moderni hanno anche tre proprietà separate che fanno la stessa cosa delle funzioni, ma si possono impostare e animare in modo indipendente:

.card {
  rotate: -2deg;
  transition: scale 0.2s ease-out;
}
.card:hover {
  scale: 1.05;   /* the rotation stays, because it is a different property */
}

Si combinano sempre come se fossero scritte transform: translate(...) rotate(...) scale(...) prima di qualsiasi valore transform, in qualunque ordine le dichiari. Fai attenzione alla sintassi: translate: 10px 20px e scale: 1.2 accettano valori senza le parentesi delle funzioni.

Centrare con translate(-50%, -50%)

Siccome le percentuali di translate() si riferiscono alla dimensione dell'elemento stesso, top: 50%; left: 50%; transform: translate(-50%, -50%) centra nel suo genitore un elemento posizionato in modo assoluto di qualsiasi dimensione. La pagina su come centrare un div lo confronta con flexbox e grid.

Errori comuni

Due dichiarazioni transform. Quella scritta dopo vince del tutto. Combina le funzioni, oppure usa le proprietà rotate, scale e translate.
Trasformare un elemento inline. Un semplice <span> o <a> ignora transform. Rendilo inline-block.
Aspettarsi che i vicini si spostino. Le trasformazioni non cambiano mai il layout. Per fare spazio, cambia width, margin o gap.
Ordine delle funzioni sbagliato. rotate() prima di translate() sposta lungo l'asse ruotato.
Sorprese con i figli in position: fixed. Un elemento trasformato diventa il blocco contenitore dei discendenti con posizione fissa, quindi un header fixed al suo interno scorre con lui. Crea anche un nuovo contesto di impilamento per z-index.

Domande frequenti

Cosa fa transform in CSS?

Cambia il modo in cui un elemento viene disegnato: spostato (translate), ridimensionato (scale), ruotato (rotate) o inclinato (skew). L'elemento mantiene il suo posto originale nel layout, quindi gli elementi intorno non si spostano.

Come applico più trasformazioni in CSS?

Elencale in un solo valore transform, separate da spazi: transform: translateX(50px) rotate(20deg) scale(1.2);. Scrivere una seconda dichiarazione transform sostituisce la prima invece di aggiungersi.

L'ordine delle funzioni di transform conta?

Sì. Leggendo da sinistra a destra, ogni funzione lavora negli assi lasciati dalle precedenti, quindi rotate(45deg) translateX(100px) sposta l'elemento lungo un asse ruotato, mentre translateX(100px) rotate(45deg) lo sposta in linea retta e poi lo ruota.

Cos'è transform-origin?

Il punto fisso attorno a cui avvengono ridimensionamento, rotazione e inclinazione. Il valore predefinito è il centro (50% 50%). transform-origin: top left fa crescere o ruotare un elemento a partire dal suo angolo in alto a sinistra.

Perché transform non funziona sul mio span?

Le trasformazioni non si applicano agli elementi inline non sostituiti, come un semplice <span> o <a>. Dai all'elemento display: inline-block o block e la trasformazione funziona.

Concetti correlati