Docs CSS exécutables : Rotation CSS

Q: Comment faire pivoter un élément en CSS ?

Utilisez transform: rotate(45deg); ou la propriété séparée rotate: 45deg;. Les angles positifs tournent dans le sens des aiguilles d'une montre et les angles négatifs dans le sens inverse, autour du centre de l'élément sauf si vous changez transform-origin.

Q: Quelle est la différence entre transform: rotate() et la propriété rotate ?

Elles donnent le même rendu. La propriété rotate est indépendante de transform : une règle de survol peut changer scale ou translate sans supprimer la rotation, et chacune peut avoir sa propre transition. Ensemble, elles agissent comme transform: translate() rotate() scale(), quel que soit l'ordre dans lequel vous les déclarez.

Q: Comment faire pivoter une image de 90 degrés en CSS ?

Ajoutez transform: rotate(90deg); (ou rotate: 90deg;) à l'img. L'image garde son espace d'origine dans la mise en page, donc une image haute passée en paysage peut chevaucher ses voisines ; prévoyez dans son conteneur la place de la taille tournée.

Q: Comment faire tourner un élément en continu en CSS ?

Définissez @keyframes spin { to { rotate: 360deg; } } et appliquez animation: spin 1s linear infinite;. Utilisez linear pour que la vitesse reste constante, et ralentissez ou arrêtez l'animation sous prefers-reduced-motion: reduce.

Q: Comment écrire un texte vertical en CSS ?

Pour une étiquette verticale, writing-mode: vertical-rl est en général préférable à rotate(90deg), car il change aussi la mise en page : l'élément occupe un espace vertical au lieu de chevaucher ses voisins. Utilisez rotate pour de petites inclinaisons décoratives.

Faire pivoter un élément

Deux façons, même résultat : la fonction rotate() dans transform, ou la propriété rotate seule. Les angles positifs tournent dans le sens des aiguilles d'une montre :

<!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>

Les boîtes bleue et verte sont tournées exactement de la même façon, de 45 degrés dans le sens horaire autour de leur centre. La boîte ambre a un angle négatif, elle penche donc dans le sens inverse. La rotation ne déplace jamais la mise en page : chaque boîte occupe toujours son emplacement d'origine de 90 sur 60, c'est pourquoi les éléments tournés peuvent chevaucher leurs voisins.

Les unités d'angle

Unité	Tour complet	90 degrés
`deg`	`360deg`	`90deg`
`turn`	`1turn`	`0.25turn`
`rad`	`6.2832rad`	`1.5708rad`
`grad`	`400grad`	`100grad`

deg est le choix habituel ; turn se lit bien pour une rotation continue (rotate: 1turn). Les angles supérieurs à 360 sont autorisés et comptent dans les animations : rotate(720deg) dans une keyframe fait deux tours. Écrivez toujours l'unité : rotate(45) est invalide et ignoré.

Faites glisser le curseur pour voir un angle dans chaque 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>

Pivoter autour d'un coin : transform-origin

Un élément tourne autour de son centre par défaut. transform-origin déplace le pivot. Une aiguille d'horloge pivote sur son extrémité, pas sur son milieu :

<!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'extrémité basse de l'aiguille repose sur l'axe ambre au centre du cadran, et rotate: 120deg la place sur quatre heures. Supprimez la ligne transform-origin et l'aiguille tourne alors autour de son propre milieu, hors de l'axe.

Faire pivoter un texte et les étiquettes verticales

Une petite inclinaison avec rotate convient pour un badge ou un autocollant. Pour une étiquette vraiment verticale, writing-mode est préférable, car il change la mise en page : l'élément devient haut et étroit au lieu de chevaucher ce qui l'entoure.

<!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>

L'affichage montre la taille de mise en page de chaque étiquette. Celle qui est tournée occupe toujours sa boîte d'origine, large et basse : elle laisse un espace vide à côté d'elle et dépasse au-dessus et en dessous de sa rangée, sur ce qui s'y trouve. Celle en writing-mode occupe une boîte haute et étroite. Ajouter rotate: 180deg la fait lire de bas en haut, le sens habituel d'une étiquette verticale.

Faire pivoter une icône au clic ou au survol

Tourner une flèche de 180 degrés est la façon standard de montrer qu'une section est ouverte. Combinez rotate avec une transition :

<!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>

Le chevron est un carré avec deux bordures, tourné de 45 degrés pour pointer vers le bas. Quand le bouton est déplié, il passe à 225 degrés et pointe vers le haut, et la transition anime le demi-tour. C'est l'attribut aria-expanded qui pilote le style : l'état visuel et l'état annoncé par les lecteurs d'écran ne peuvent jamais diverger.

Un indicateur de chargement qui tourne

Une rotation continue va de 0 à 360 degrés, répétée avec une temporisation linear pour que la vitesse ne change jamais :

<!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>

Avec seulement une keyframe to, l'animation part de la rotation propre de l'élément (aucune) et finit à 360deg, et infinite la répète sans saut, car 360deg ressemble à 0. Pour les personnes qui ont demandé à leur système moins d'animations, l'indicateur tourne trois fois moins vite. Plus d'informations sur les keyframes sur la page animation.

Rotation 3D : rotateX, rotateY

rotateX() fait basculer un élément vers l'arrière autour de l'axe horizontal et rotateY() le fait tourner autour de l'axe vertical, comme une porte. Sans perspective, ils donnent seulement un effet écrasé ; perspective sur le parent ajoute de la profondeur :

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

Pour mettre un élément en miroir plutôt que de le faire tourner, utilisez scale: -1 1 (un retournement horizontal). Une rotation de 180 degrés le met à l'envers, ce qui n'est pas la même chose.

Erreurs courantes

Un <span> ou un <a> qui ne tourne pas. Les éléments inline simples ignorent les transformations. Ajoutez display: inline-block.
Une rotation qui disparaît au survol. Une règle de survol avec transform: scale(1.1) remplace transform: rotate(...). Utilisez les propriétés séparées rotate et scale, ou listez les deux fonctions.
S'attendre à ce que la mise en page fasse de la place. Une image tournée garde sa boîte non tournée et chevauche ses voisines. Donnez au conteneur la taille tournée, ou utilisez writing-mode pour le texte.
Des indicateurs de chargement en ease. La temporisation par défaut accélère et ralentit à chaque tour. Utilisez linear.
Pivoter autour du mauvais point. Réglez transform-origin avant d'ajuster l'angle.

Questions fréquentes

Comment faire pivoter un élément en CSS ?

Utilisez transform: rotate(45deg); ou la propriété séparée rotate: 45deg;. Les angles positifs tournent dans le sens des aiguilles d'une montre et les angles négatifs dans le sens inverse, autour du centre de l'élément sauf si vous changez transform-origin.

Quelle est la différence entre transform: rotate() et la propriété rotate ?

Elles donnent le même rendu. La propriété rotate est indépendante de transform : une règle de survol peut changer scale ou translate sans supprimer la rotation, et chacune peut avoir sa propre transition. Ensemble, elles agissent comme transform: translate() rotate() scale(), quel que soit l'ordre dans lequel vous les déclarez.

Comment faire pivoter une image de 90 degrés en CSS ?

Ajoutez transform: rotate(90deg); (ou rotate: 90deg;) à l'img. L'image garde son espace d'origine dans la mise en page, donc une image haute passée en paysage peut chevaucher ses voisines ; prévoyez dans son conteneur la place de la taille tournée.

Comment faire tourner un élément en continu en CSS ?

Définissez @keyframes spin { to { rotate: 360deg; } } et appliquez animation: spin 1s linear infinite;. Utilisez linear pour que la vitesse reste constante, et ralentissez ou arrêtez l'animation sous prefers-reduced-motion: reduce.

Comment écrire un texte vertical en CSS ?

Pour une étiquette verticale, writing-mode: vertical-rl est en général préférable à rotate(90deg), car il change aussi la mise en page : l'élément occupe un espace vertical au lieu de chevaucher ses voisins. Utilisez rotate pour de petites inclinaisons décoratives.

Concepts liés