Guida CSS interattiva: Rotate

Q: Come si ruota un elemento in CSS?

Usa transform: rotate(45deg); oppure la proprietà separata rotate: 45deg;. Gli angoli positivi girano in senso orario e quelli negativi in senso antiorario, attorno al centro dell'elemento, a meno che tu non cambi transform-origin.

Q: Qual è la differenza tra transform: rotate() e la proprietà rotate?

Disegnano lo stesso risultato. La proprietà rotate è indipendente da transform, quindi una regola hover può cambiare scale o translate senza togliere la rotazione, e ognuna può avere la sua transizione. Insieme si comportano come transform: translate() rotate() scale(), in qualunque ordine le dichiari.

Q: Come ruoto un'immagine di 90 gradi in CSS?

Aggiungi transform: rotate(90deg); (o rotate: 90deg;) all'img. L'immagine mantiene il suo spazio originale nel layout, quindi un'immagine verticale ruotata in orizzontale può sovrapporsi ai vicini; lascia al suo contenitore spazio per la dimensione ruotata.

Q: Come faccio girare un elemento in CSS?

Definisci @keyframes spin { to { rotate: 360deg; } } e applica animation: spin 1s linear infinite;. Usa linear perché la velocità resti costante, e rallentalo o fermalo con prefers-reduced-motion: reduce.

Q: Come ruoto il testo in verticale in CSS?

Per un'etichetta verticale, writing-mode: vertical-rl di solito è meglio di rotate(90deg), perché cambia anche il layout: l'elemento occupa spazio in verticale invece di sovrapporsi. Usa rotate per piccole inclinazioni decorative.

Ruotare un elemento

Due modi, stesso risultato: la funzione rotate() dentro transform, oppure la proprietà rotate da sola. Gli angoli positivi girano in senso orario:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rotate</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 50px; padding: 30px; }
    .box { width: 90px; height: 60px; display: grid; place-items: center; color: white; }
    .a { transform: rotate(45deg); background: #2563eb; }
    .b { rotate: 45deg; background: #16a34a; }
    .c { rotate: -15deg; background: #f59e0b; color: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div class="box a">transform</div>
    <div class="box b">rotate: 45deg</div>
    <div class="box c">-15deg</div>
  </div>
</body>
</html>

Il riquadro blu e quello verde sono ruotati esattamente allo stesso modo, di 45 gradi in senso orario attorno al proprio centro. Il riquadro ambra ha un angolo negativo, quindi si inclina in senso antiorario. La rotazione non sposta mai il layout: ogni riquadro occupa ancora il suo spazio originale di 90 per 60, ed è per questo che gli elementi ruotati possono sovrapporsi ai vicini.

Unità degli angoli

Unità	Giro completo	90 gradi
`deg`	`360deg`	`90deg`
`turn`	`1turn`	`0.25turn`
`rad`	`6.2832rad`	`1.5708rad`
`grad`	`400grad`	`100grad`

deg è la scelta abituale; turn si legge bene per le rotazioni continue (rotate: 1turn). Gli angoli oltre 360 sono ammessi e contano nelle animazioni: rotate(720deg) in un keyframe fa due giri. Scrivi sempre l'unità: rotate(45) non è valido e viene ignorato.

Trascina il cursore per vedere un angolo in ogni unità:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angle slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .stage { display: grid; place-items: center; height: 160px; background: #f3f4f6; margin: 10px 0; }
    #arrow { width: 110px; height: 14px; background: #2563eb; border-radius: 7px; position: relative; }
    #arrow::after { content: ""; position: absolute; inset-inline-end: -10px; top: -8px; border: 15px solid transparent; border-inline-start: 18px solid #2563eb; border-inline-end: 0; }
  </style>
</head>
<body>
  <label>angle <input id="a" type="range" min="-360" max="360" value="30"></label>
  <div class="stage"><div id="arrow"></div></div>
  <p id="out"></p>
  <script>
    const input = document.getElementById('a');
    const update = () => {
      const deg = Number(input.value);
      document.getElementById('arrow').style.rotate = deg + 'deg';
      document.getElementById('out').textContent =
        deg + 'deg = ' + (deg / 360).toFixed(3) + 'turn = ' + (deg * Math.PI / 180).toFixed(4) + 'rad';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Ruotare attorno a un angolo: transform-origin

Per impostazione predefinita un elemento ruota attorno al suo centro. transform-origin sposta il perno. La lancetta di un orologio ruota attorno alla sua estremità, non al suo centro:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transform-origin</title>
  <style>
    .face { position: relative; width: 160px; height: 160px; border-radius: 50%; background: #e5e7eb; }
    .hand {
      position: absolute;
      left: 76px;              /* 80px center minus half the 8px width */
      top: 20px;
      width: 8px;
      height: 60px;
      border-radius: 4px;
      background: #111827;
      transform-origin: bottom center; /* pivot at the center of the face */
      rotate: 120deg;
    }
    .pin { position: absolute; left: 74px; top: 74px; width: 12px; height: 12px; border-radius: 50%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="face"><div class="hand" id="hand"></div><div class="pin"></div></div>
</body>
</html>

L'estremità inferiore della lancetta sta sul perno ambra al centro del quadrante, e rotate: 120deg la porta alle quattro. Togli la riga transform-origin e la lancetta gira invece attorno al proprio centro, fuori dal perno.

Ruotare il testo ed etichette verticali

Una piccola inclinazione con rotate va bene per un badge o un adesivo. Per un'etichetta davvero verticale è meglio writing-mode, perché cambia il layout: l'elemento diventa alto e stretto invece di sovrapporsi a ciò che ha accanto.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical text</title>
  <style>
    body { font-family: system-ui, sans-serif; padding-top: 24px; }
    .row { display: flex; gap: 12px; align-items: flex-start; }
    .label { background: #2563eb; color: white; padding: 6px 10px; }
    .rotated { rotate: -90deg; }
    .vertical { writing-mode: vertical-rl; rotate: 180deg; }
    .content { background: #e5e7eb; padding: 10px; }
    .badge { display: inline-block; rotate: -6deg; background: #f59e0b; padding: 4px 10px; margin: 16px 0 0 8px; }
  </style>
</head>
<body>
  <div class="row"><div class="label rotated" id="r">Section</div><div class="content">rotate: -90deg overlaps</div></div>
  <div class="row" style="margin-top: 20px;"><div class="label vertical" id="v">Section</div><div class="content">writing-mode takes vertical space</div></div>
  <span class="badge">New</span>
  <p id="out"></p>
  <script>
    const size = (id) => { const el = document.getElementById(id); return el.offsetWidth + ' x ' + el.offsetHeight; };
    document.getElementById('out').textContent = 'layout box: rotated ' + size('r') + ', writing-mode ' + size('v');
  </script>
</body>
</html>

Il riquadro mostra la dimensione di layout di ogni etichetta. Quella ruotata occupa ancora il suo riquadro originale, largo e basso: lascia uno spazio vuoto accanto e sporge sopra e sotto la sua riga, su ciò che c'è lì. Quella con writing-mode occupa un riquadro alto e stretto. Aggiungere rotate: 180deg la fa leggere dal basso verso l'alto, la direzione abituale per un'etichetta verticale.

Ruotare un'icona al clic o in hover

Girare una freccia di 180 gradi è il modo standard per mostrare che una sezione è aperta. Combina rotate con una transizione:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rotating arrow</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font: inherit; border: 1px solid #111827; background: white; border-radius: 6px; }
    .chevron { width: 10px; height: 10px; border-inline-end: 2px solid #111827; border-bottom: 2px solid #111827; rotate: 45deg; transition: rotate 0.25s ease-out; }
    .toggle[aria-expanded="true"] .chevron { rotate: 225deg; }
  </style>
</head>
<body>
  <button class="toggle" aria-expanded="false">Details <span class="chevron" aria-hidden="true"></span></button>
  <script>
    const btn = document.querySelector('.toggle');
    btn.addEventListener('click', () => btn.setAttribute('aria-expanded', btn.getAttribute('aria-expanded') !== 'true'));
  </script>
</body>
</html>

La freccia è un quadrato con due bordi, ruotato di 45 gradi in modo che punti in basso. Quando il pulsante è espanso passa a 225 gradi, puntando in alto, e la transizione anima il mezzo giro. È l'attributo aria-expanded a guidare lo stile, quindi lo stato visivo e quello annunciato dagli screen reader non possono mai essere in disaccordo.

Un loader che gira

Una rotazione continua va da 0 a 360 gradi, ripetuta con timing linear perché la velocità non cambi mai:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spinner</title>
  <style>
    @keyframes spin {
      to { rotate: 360deg; }
    }
    .spinner {
      width: 36px;
      height: 36px;
      border: 4px solid #e5e7eb;
      border-top-color: #2563eb;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .spinner { animation-duration: 3s; } /* slower, still shows activity */
    }
  </style>
</head>
<body>
  <div class="spinner" role="status" aria-label="Loading"></div>
</body>
</html>

Con il solo keyframe to, l'animazione parte dalla rotazione propria dell'elemento (nessuna) e finisce a 360deg, e infinite la ripete senza scatti perché 360deg ha lo stesso aspetto di 0. Per chi ha chiesto al sistema meno movimento, lo spinner gira tre volte più lentamente. Trovi altro sui keyframe nella pagina sulle animazioni.

Rotazione 3D: rotateX, rotateY

rotateX() inclina un elemento all'indietro attorno all'asse orizzontale e rotateY() lo gira attorno all'asse verticale, come una porta. Senza prospettiva sembrano solo schiacciati; perspective sul genitore aggiunge profondità:

.scene { perspective: 600px; }
.card  { transform: rotateY(35deg); }
.flip  { transform: rotateY(180deg); backface-visibility: hidden; } /* card flip */

Per specchiare un elemento invece di ruotarlo, usa scale: -1 1 (un ribaltamento orizzontale). Una rotazione di 180 gradi lo capovolge, che non è la stessa cosa.

Errori comuni

Ruotare uno <span> o un <a> che resta fermo. Gli elementi inline semplici ignorano le trasformazioni. Aggiungi display: inline-block.
Una rotazione che sparisce in hover. Una regola hover con transform: scale(1.1) sostituisce transform: rotate(...). Usa le proprietà separate rotate e scale, oppure elenca entrambe le funzioni.
Aspettarsi che il layout faccia spazio. Un'immagine ruotata mantiene il suo riquadro non ruotato e si sovrappone ai vicini. Dai al contenitore la dimensione ruotata, oppure usa writing-mode per il testo.
Spinner con ease. Il timing predefinito accelera e rallenta a ogni giro. Usa linear.
Ruotare attorno al punto sbagliato. Imposta transform-origin prima di regolare l'angolo.

Domande frequenti

Come si ruota un elemento in CSS?

Usa transform: rotate(45deg); oppure la proprietà separata rotate: 45deg;. Gli angoli positivi girano in senso orario e quelli negativi in senso antiorario, attorno al centro dell'elemento, a meno che tu non cambi transform-origin.

Qual è la differenza tra transform: rotate() e la proprietà rotate?

Disegnano lo stesso risultato. La proprietà rotate è indipendente da transform, quindi una regola hover può cambiare scale o translate senza togliere la rotazione, e ognuna può avere la sua transizione. Insieme si comportano come transform: translate() rotate() scale(), in qualunque ordine le dichiari.

Come ruoto un'immagine di 90 gradi in CSS?

Aggiungi transform: rotate(90deg); (o rotate: 90deg;) all'img. L'immagine mantiene il suo spazio originale nel layout, quindi un'immagine verticale ruotata in orizzontale può sovrapporsi ai vicini; lascia al suo contenitore spazio per la dimensione ruotata.

Come faccio girare un elemento in CSS?

Definisci @keyframes spin { to { rotate: 360deg; } } e applica animation: spin 1s linear infinite;. Usa linear perché la velocità resti costante, e rallentalo o fermalo con prefers-reduced-motion: reduce.

Come ruoto il testo in verticale in CSS?

Per un'etichetta verticale, writing-mode: vertical-rl di solito è meglio di rotate(90deg), perché cambia anche il layout: l'elemento occupa spazio in verticale invece di sovrapporsi. Usa rotate per piccole inclinazioni decorative.

Concetti correlati