Ausführbare CSS-Docs: CSS Transform

Q: Was macht transform in CSS?

Es ändert, wie ein Element gezeichnet wird: verschoben (translate), in der Größe verändert (scale), gedreht (rotate) oder geneigt (skew). Das Element behält seinen ursprünglichen Platz im Layout, also bewegen sich die Elemente drumherum nicht.

Q: Wie wende ich mehrere Transforms in CSS an?

Liste sie in einem einzigen transform-Wert auf, getrennt durch Leerzeichen: transform: translateX(50px) rotate(20deg) scale(1.2);. Eine zweite transform-Deklaration ersetzt die erste, statt etwas hinzuzufügen.

Was transform macht

transform ändert, wie ein Element gezeichnet wird: verschoben, skaliert, gedreht oder geneigt. Die gestrichelten Umrisse unten zeigen, wo jede Box ohne ihr transform stünde:

<!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) verschiebt die blaue Box um 20px zur Seite und 10px nach unten. scale(1.3) macht die grüne um ihre Mitte herum 30% größer. rotate(20deg) dreht die bernsteinfarbene im Uhrzeigersinn, und skewX(-20deg) neigt die dunkle. In jedem Fall bleibt der gestrichelte Platz, also der Raum, den das Element im Layout einnimmt, genau dort, wo er war.

transform-Funktionen

Funktion	Macht	Beispiel
`translate(x, y)`	verschiebt	`translate(20px, -10px)`, `translate(-50%, -50%)`
`translateX(x)` / `translateY(y)`	verschiebt auf einer Achse	`translateY(-4px)`
`scale(s)` / `scale(x, y)`	ändert die Größe (1 = Original, 0.5 = halb, negativ spiegelt)	`scale(1.1)`, `scale(-1, 1)`
`scaleX(s)` / `scaleY(s)`	ändert die Größe auf einer Achse	`scaleX(0.5)`
`rotate(angle)`	dreht im Uhrzeigersinn (negativ = gegen den Uhrzeigersinn)	`rotate(45deg)`, `rotate(0.25turn)`
`skew(x, y)` / `skewX(a)` / `skewY(a)`	neigt	`skewX(-15deg)`
`matrix(a, b, c, d, e, f)`	alles oben in einer Matrix, meist das, was der Browser zurückmeldet
`none`	kein transform

Prozentwerte in translate() beziehen sich auf die eigene Größe des Elements, nicht auf die des Elternelements. Die Drehung hat eine eigene Seite mit Grad, Umdrehungen und Rotation: CSS drehen.

transform-Playground

Bewege die Schieberegler. Die erste Zeile ist der transform-Wert, den du gebaut hast; die zweite ist die Matrix, die der Browser daraus berechnet hat, und genau die liefert getComputedStyle für jedes transform:

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

Transforms verschieben das Layout nicht

Ein transformiertes Element wird woanders gezeichnet, aber die Seite wird angeordnet, als wäre es nicht transformiert. Seine Nachbarn behalten ihre Positionen. Genau deshalb eignen sich Transforms für Hover-Effekte und Animationen: Drumherum wird nichts neu angeordnet.

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

Beide mittleren Boxen sehen 1,5-mal so groß aus. Die skalierte überlappt ihre Nachbarn, und C bleibt stehen; die mit width und height vergrößerte schiebt C um 40px weiter.

Mehrere Transforms und ihre Reihenfolge

Setz mehrere Funktionen in ein transform, getrennt durch Leerzeichen. Die Reihenfolge ändert das Ergebnis, denn von links nach rechts gelesen arbeitet jede Funktion im Koordinatensystem, das die Funktionen davor hinterlassen haben:

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

Die blaue Box wurde 120px gerade verschoben und dann an Ort und Stelle gedreht. Die grüne wurde zuerst gedreht, also zeigt ihre „x-Achse“ diagonal, und translateX(120px) verschiebt sie die Diagonale hinunter. Dieselben Funktionen, ein anderer Ort.

Die andere Falle: Eine zweite transform-Deklaration ersetzt die erste. Hat eine Karte transform: rotate(-2deg) und sagt ihre Hover-Regel transform: scale(1.05), verschwindet die Drehung beim Hovern. Wiederhole beides (rotate(-2deg) scale(1.05)) oder nimm die eigenständigen Eigenschaften unten.

transform-origin

Skalieren, Drehen und Neigen passieren um einen festen Punkt herum, den Transformationsursprung, der standardmäßig in der Mitte liegt. Du änderst ihn mit Schlüsselwörtern, Längen oder Prozentwerten:

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

Alle drei Boxen drehen sich um 25 Grad. Die erste dreht sich um ihre Mitte, die zweite hält ihre obere linke Ecke an der Ecke des Platzes fest, die dritte ihre untere rechte Ecke. Ein Dropdown-Menü, das aus seinem Button herauswächst, nutzt transform-origin: top mit scale().

Die Eigenschaften translate, scale und rotate

Moderne Browser haben außerdem drei eigenständige Eigenschaften, die dasselbe tun wie die Funktionen, sich aber unabhängig setzen und animieren lassen:

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

Sie werden immer kombiniert, als stünde transform: translate(...) rotate(...) scale(...) vor jedem transform-Wert, egal in welcher Reihenfolge du sie deklarierst. Beachte die Syntax: translate: 10px 20px und scale: 1.2 nehmen Werte ohne die Klammern der Funktion.

Zentrieren mit translate(-50%, -50%)

Weil sich Prozentwerte in translate() auf die eigene Größe des Elements beziehen, zentriert top: 50%; left: 50%; transform: translate(-50%, -50%) ein absolut positioniertes Element beliebiger Größe in seinem Elternelement. Die Seite div zentrieren vergleicht das mit Flexbox und Grid.

Häufige Fehler

Zwei transform-Deklarationen. Die spätere gewinnt vollständig. Kombiniere die Funktionen oder nimm die Eigenschaften rotate, scale und translate.
Ein Inline-Element transformieren. Ein einfaches <span> oder <a> ignoriert transform. Mach es zu inline-block.
Erwarten, dass Nachbarn ausweichen. Transforms ändern das Layout nie. Um Platz zu schaffen, ändere width, margin oder gap.
Falsche Reihenfolge der Funktionen. rotate() vor translate() verschiebt entlang der gedrehten Achse.
Überraschungen mit Kindern in position: fixed. Ein transformiertes Element wird zum umgebenden Block für fixiert positionierte Nachfahren, also scrollt ein fixierter Header darin mit. Außerdem erzeugt es einen neuen Stacking Context für z-index.

Häufig gestellte Fragen

Was macht transform in CSS?

Es ändert, wie ein Element gezeichnet wird: verschoben (translate), in der Größe verändert (scale), gedreht (rotate) oder geneigt (skew). Das Element behält seinen ursprünglichen Platz im Layout, also bewegen sich die Elemente drumherum nicht.

Wie wende ich mehrere Transforms in CSS an?

Liste sie in einem einzigen transform-Wert auf, getrennt durch Leerzeichen: transform: translateX(50px) rotate(20deg) scale(1.2);. Eine zweite transform-Deklaration ersetzt die erste, statt etwas hinzuzufügen.

Spielt die Reihenfolge der transform-Funktionen eine Rolle?

Ja. Von links nach rechts gelesen arbeitet jede Funktion in den Achsen, die die vorherigen hinterlassen haben. rotate(45deg) translateX(100px) verschiebt das Element also entlang einer gedrehten Achse, während translateX(100px) rotate(45deg) es gerade verschiebt und dann dreht.

Was ist transform-origin?

Der feste Punkt, um den herum skaliert, gedreht und geneigt wird. Der Standard ist die Mitte (50% 50%). Mit transform-origin: top left wächst ein Element aus seiner oberen linken Ecke heraus oder dreht sich um sie.

Warum funktioniert transform an meinem span nicht?

Transforms gelten nicht für nicht ersetzte Inline-Elemente wie ein einfaches <span> oder <a>. Gib dem Element display: inline-block oder block, und das transform funktioniert.

Verwandte Konzepte