Docs CSS exécutables : Transform CSS

Q: Que fait transform en CSS ?

Il change la façon dont un élément est dessiné : déplacé (translate), redimensionné (scale), tourné (rotate) ou incliné (skew). L'élément garde sa place d'origine dans la mise en page, donc les éléments autour de lui ne bougent pas.

Q: Comment appliquer plusieurs transformations en CSS ?

Listez-les dans une seule valeur transform, séparées par des espaces : transform: translateX(50px) rotate(20deg) scale(1.2);. Écrire une seconde déclaration transform remplace la première au lieu de s'y ajouter.

Ce que fait transform

transform change la façon dont un élément est dessiné : déplacé, redimensionné, tourné ou incliné. Les contours en pointillés ci-dessous montrent où serait chaque boîte sans sa transformation :

<!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) décale la boîte bleue de 20px sur le côté et de 10px vers le bas. scale(1.3) agrandit la verte de 30 % autour de son centre. rotate(20deg) fait tourner l'ambre dans le sens des aiguilles d'une montre, et skewX(-20deg) incline la foncée. Dans tous les cas, l'emplacement en pointillés, c'est-à-dire l'espace que l'élément occupe dans la mise en page, reste exactement où il était.

Les fonctions de transformation

Fonction	Effet	Exemple
`translate(x, y)`	déplace	`translate(20px, -10px)`, `translate(-50%, -50%)`
`translateX(x)` / `translateY(y)`	déplace sur un axe	`translateY(-4px)`
`scale(s)` / `scale(x, y)`	redimensionne (1 = original, 0.5 = moitié, négatif = miroir)	`scale(1.1)`, `scale(-1, 1)`
`scaleX(s)` / `scaleY(s)`	redimensionne sur un axe	`scaleX(0.5)`
`rotate(angle)`	tourne dans le sens horaire (négatif = sens antihoraire)	`rotate(45deg)`, `rotate(0.25turn)`
`skew(x, y)` / `skewX(a)` / `skewY(a)`	incline	`skewX(-15deg)`
`matrix(a, b, c, d, e, f)`	tout ce qui précède dans une matrice, surtout ce que le navigateur renvoie
`none`	aucune transformation

Les pourcentages de translate() sont relatifs à la taille de l'élément lui-même, pas à celle de son parent. La rotation a sa propre page, avec les degrés, les tours et la rotation continue : rotation en CSS.

Bac à sable transform

Déplacez les curseurs. La première ligne est la valeur transform que vous avez construite ; la seconde est la matrice que le navigateur en a déduite, c'est-à-dire ce que getComputedStyle renvoie pour toute transformation :

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

Les transformations ne déplacent pas la mise en page

Un élément transformé est dessiné ailleurs, mais la page est mise en page comme s'il ne l'était pas. Ses voisins gardent leur position. C'est ce qui rend les transformations idéales pour les effets de survol et les animations : rien autour ne se réorganise.

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

Les deux boîtes du milieu semblent 1,5 fois plus grandes. Celle agrandie avec scale chevauche ses voisines et C ne bouge pas ; celle agrandie avec width et height repousse C de 40px.

Plusieurs transformations et leur ordre

Placez plusieurs fonctions dans un seul transform, séparées par des espaces. L'ordre change le résultat car, en lisant de gauche à droite, chaque fonction agit dans le système de coordonnées laissé par les fonctions précédentes :

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

La boîte bleue s'est déplacée de 120px tout droit, puis a pivoté sur place. La verte a d'abord pivoté, son « axe x » pointe donc en diagonale, et translateX(120px) la déplace le long de cette diagonale. Mêmes fonctions, position différente.

L'autre piège : une seconde déclaration transform remplace la première. Si une carte a transform: rotate(-2deg) et que sa règle de survol indique transform: scale(1.05), la rotation disparaît au survol. Répétez les deux (rotate(-2deg) scale(1.05)), ou utilisez les propriétés individuelles ci-dessous.

transform-origin

Le redimensionnement, la rotation et l'inclinaison se font autour d'un point fixe, l'origine de la transformation, qui est le centre par défaut. Changez-la avec des mots-clés, des longueurs ou des pourcentages :

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

Les trois boîtes pivotent de 25 degrés. La première tourne autour de son milieu, la deuxième garde son coin supérieur gauche épinglé au coin de l'emplacement, la troisième son coin inférieur droit. Un menu déroulant qui sort de son bouton utilise transform-origin: top avec scale().

Les propriétés translate, scale et rotate

Les navigateurs modernes ont aussi trois propriétés séparées qui font la même chose que les fonctions, mais qui peuvent être définies et animées indépendamment :

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

Elles se combinent toujours comme si l'on avait écrit transform: translate(...) rotate(...) scale(...) devant toute valeur de transform, quel que soit l'ordre dans lequel vous les déclarez. Attention à la syntaxe : translate: 10px 20px et scale: 1.2 prennent des valeurs sans les parenthèses des fonctions.

Centrer avec translate(-50%, -50%)

Comme les pourcentages de translate() se rapportent à la taille de l'élément lui-même, top: 50%; left: 50%; transform: translate(-50%, -50%) centre dans son parent un élément positionné en absolu de n'importe quelle taille. La page pour centrer une div le compare à flexbox et grid.

Erreurs courantes

Deux déclarations transform. La dernière l'emporte entièrement. Combinez les fonctions, ou utilisez les propriétés rotate, scale et translate.
Transformer un élément inline. Un simple <span> ou <a> ignore transform. Passez-le en inline-block.
S'attendre à ce que les voisins bougent. Les transformations ne changent jamais la mise en page. Pour faire de la place, modifiez width, margin ou gap.
Un mauvais ordre des fonctions. rotate() avant translate() déplace le long de l'axe tourné.
Des surprises avec des enfants en position: fixed. Un élément transformé devient le bloc conteneur de ses descendants en position fixed, si bien qu'un en-tête fixed à l'intérieur défile avec lui. Il crée aussi un nouveau contexte d'empilement pour z-index.

Questions fréquentes

Que fait transform en CSS ?

Il change la façon dont un élément est dessiné : déplacé (translate), redimensionné (scale), tourné (rotate) ou incliné (skew). L'élément garde sa place d'origine dans la mise en page, donc les éléments autour de lui ne bougent pas.

Comment appliquer plusieurs transformations en CSS ?

Listez-les dans une seule valeur transform, séparées par des espaces : transform: translateX(50px) rotate(20deg) scale(1.2);. Écrire une seconde déclaration transform remplace la première au lieu de s'y ajouter.

L'ordre des fonctions de transform compte-t-il ?

Oui. En lisant de gauche à droite, chaque fonction agit dans les axes laissés par les précédentes : rotate(45deg) translateX(100px) déplace l'élément le long d'un axe tourné, alors que translateX(100px) rotate(45deg) le déplace tout droit puis le fait pivoter.

Qu'est-ce que transform-origin ?

Le point fixe autour duquel se font le redimensionnement, la rotation et l'inclinaison. Par défaut, c'est le centre (50% 50%). transform-origin: top left fait grandir ou pivoter un élément depuis son coin supérieur gauche.

Pourquoi transform ne fonctionne-t-il pas sur mon span ?

Les transformations ne s'appliquent pas aux éléments inline non remplacés comme un simple <span> ou <a>. Donnez à l'élément display: inline-block ou block et la transformation fonctionne.

Concepts liés