Ausführbare CSS-Docs: CSS drehen

Q: Wie dreht man ein Element in CSS?

Mit transform: rotate(45deg); oder der eigenständigen Eigenschaft rotate: 45deg;. Positive Winkel drehen im Uhrzeigersinn und negative gegen den Uhrzeigersinn, um die Mitte des Elements, außer du änderst transform-origin.

Q: Was ist der Unterschied zwischen transform: rotate() und der Eigenschaft rotate?

Sie zeichnen dasselbe Ergebnis. Die Eigenschaft rotate ist unabhängig von transform, also kann eine Hover-Regel scale oder translate ändern, ohne die Drehung zu entfernen, und jede kann ihre eigene Transition haben. Zusammen wirken sie wie transform: translate() rotate() scale(), egal in welcher Reihenfolge du sie deklarierst.

Q: Wie drehe ich ein Bild in CSS um 90 Grad?

Füge dem img transform: rotate(90deg); (oder rotate: 90deg;) hinzu. Das Bild behält seinen ursprünglichen Platz im Layout, also kann ein hohes Bild, das ins Querformat gedreht wird, seine Nachbarn überlappen; gib seinem Container Platz für die gedrehte Größe.

Q: Wie lasse ich ein Element in CSS rotieren?

Leg @keyframes spin { to { rotate: 360deg; } } fest und wende animation: spin 1s linear infinite; an. Nimm linear, damit die Geschwindigkeit konstant bleibt, und mach es unter prefers-reduced-motion: reduce langsamer oder halte es an.

Q: Wie drehe ich Text in CSS senkrecht?

Für ein senkrechtes Label ist writing-mode: vertical-rl meist besser als rotate(90deg), weil es auch das Layout ändert: Das Element nimmt senkrechten Platz ein, statt zu überlappen. Nimm rotate für kleine dekorative Neigungen.

Ein Element drehen

Zwei Wege, dasselbe Ergebnis: die Funktion rotate() in transform oder die Eigenschaft rotate für sich. Positive Winkel drehen im Uhrzeigersinn:

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

Die blaue und die grüne Box sind genau gleich gedreht, 45 Grad im Uhrzeigersinn um ihre Mitte. Die bernsteinfarbene Box hat einen negativen Winkel und neigt sich deshalb gegen den Uhrzeigersinn. Eine Drehung verschiebt nie das Layout: Jede Box belegt weiterhin ihren ursprünglichen Platz von 90 mal 60, und deshalb können gedrehte Elemente ihre Nachbarn überlappen.

Winkeleinheiten

Einheit	Voller Kreis	90 Grad
`deg`	`360deg`	`90deg`
`turn`	`1turn`	`0.25turn`
`rad`	`6.2832rad`	`1.5708rad`
`grad`	`400grad`	`100grad`

deg ist die übliche Wahl; turn liest sich gut für Rotation (rotate: 1turn). Winkel über 360 sind erlaubt und spielen in Animationen eine Rolle: rotate(720deg) in einem Keyframe dreht zweimal. Schreib immer die Einheit dazu: rotate(45) ist ungültig und wird ignoriert.

Zieh am Schieberegler, um einen Winkel in jeder Einheit zu sehen:

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

Um eine Ecke drehen: transform-origin

Ein Element dreht sich standardmäßig um seine Mitte. transform-origin verlegt den Drehpunkt. Ein Uhrzeiger dreht sich um sein Ende, nicht um seine Mitte:

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

Das untere Ende des Zeigers sitzt auf dem bernsteinfarbenen Stift in der Mitte des Zifferblatts, und rotate: 120deg dreht ihn auf vier Uhr. Entferne die Zeile mit transform-origin, und der Zeiger dreht sich stattdessen um seine eigene Mitte, neben dem Stift.

Text drehen und senkrechte Labels

Eine kleine Neigung mit rotate passt für ein Badge oder einen Sticker. Für ein wirklich senkrechtes Label ist writing-mode besser, weil es das Layout ändert: Das Element wird hoch und schmal, statt zu überlappen, was daneben steht.

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

Die Anzeige zeigt die Layoutgröße jedes Labels. Das gedrehte belegt weiterhin seine ursprüngliche breite, niedrige Box: Es lässt daneben eine leere Lücke und ragt über und unter seine Zeile hinaus, in das hinein, was dort steht. Das Label mit writing-mode belegt eine hohe, schmale Box. Mit rotate: 180deg liest es sich von unten nach oben, die übliche Richtung für ein senkrechtes Label.

Ein Icon bei Klick oder Hover drehen

Einen Pfeil um 180 Grad zu drehen, ist der Standardweg zu zeigen, dass ein Abschnitt offen ist. Kombiniere rotate mit einer 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>

Der Winkelpfeil ist ein Quadrat mit zwei Rahmen, um 45 Grad gedreht, damit er nach unten zeigt. Ist der Button aufgeklappt, geht er auf 225 Grad und zeigt nach oben, und die Transition animiert die halbe Drehung. Das Attribut aria-expanded steuert den Style, also können der sichtbare Zustand und der Zustand, den Screenreader ansagen, nie auseinanderlaufen.

Eine rotierende Ladeanzeige

Eine Rotation ist eine Drehung von 0 bis 360 Grad, wiederholt mit linear-Timing, damit sich die Geschwindigkeit nie ändert:

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

Mit nur einem to-Keyframe startet die Animation bei der eigenen Drehung des Elements (keine) und endet bei 360deg, und infinite wiederholt sie ohne Sprung, weil 360deg genauso aussieht wie 0. Für Menschen, die ihr System um reduzierte Bewegung gebeten haben, dreht sich die Anzeige dreimal langsamer. Mehr zu Keyframes auf der Seite zu Animation.

3D-Drehung: rotateX, rotateY

rotateX() kippt ein Element um die horizontale Achse nach hinten, und rotateY() dreht es um die senkrechte Achse, wie eine Tür. Ohne Perspektive sehen sie nur gestaucht aus; perspective am Elternelement bringt Tiefe:

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

Um ein Element zu spiegeln statt zu drehen, nimm scale: -1 1 (horizontal gespiegelt). Eine Drehung um 180 Grad stellt es auf den Kopf, und das ist nicht dasselbe.

Häufige Fehler

Ein <span> oder <a> drehen, das sich nicht bewegt. Einfache Inline-Elemente ignorieren Transforms. Füge display: inline-block hinzu.
Eine Drehung, die beim Hovern verschwindet. Eine Hover-Regel mit transform: scale(1.1) ersetzt transform: rotate(...). Nimm die eigenständigen Eigenschaften rotate und scale oder liste beide Funktionen auf.
Erwarten, dass das Layout Platz macht. Ein gedrehtes Bild behält seine ungedrehte Box und überlappt seine Nachbarn. Gib dem Container die gedrehte Größe oder nimm für Text writing-mode.
Ladeanzeigen mit ease. Das Standard-Timing beschleunigt und bremst bei jeder Umdrehung. Nimm linear.
Um den falschen Punkt drehen. Setz transform-origin, bevor du den Winkel feinjustierst.

Häufig gestellte Fragen

Wie dreht man ein Element in CSS?

Mit transform: rotate(45deg); oder der eigenständigen Eigenschaft rotate: 45deg;. Positive Winkel drehen im Uhrzeigersinn und negative gegen den Uhrzeigersinn, um die Mitte des Elements, außer du änderst transform-origin.

Was ist der Unterschied zwischen transform: rotate() und der Eigenschaft rotate?

Sie zeichnen dasselbe Ergebnis. Die Eigenschaft rotate ist unabhängig von transform, also kann eine Hover-Regel scale oder translate ändern, ohne die Drehung zu entfernen, und jede kann ihre eigene Transition haben. Zusammen wirken sie wie transform: translate() rotate() scale(), egal in welcher Reihenfolge du sie deklarierst.

Wie drehe ich ein Bild in CSS um 90 Grad?

Füge dem img transform: rotate(90deg); (oder rotate: 90deg;) hinzu. Das Bild behält seinen ursprünglichen Platz im Layout, also kann ein hohes Bild, das ins Querformat gedreht wird, seine Nachbarn überlappen; gib seinem Container Platz für die gedrehte Größe.

Wie lasse ich ein Element in CSS rotieren?

Leg @keyframes spin { to { rotate: 360deg; } } fest und wende animation: spin 1s linear infinite; an. Nimm linear, damit die Geschwindigkeit konstant bleibt, und mach es unter prefers-reduced-motion: reduce langsamer oder halte es an.

Wie drehe ich Text in CSS senkrecht?

Für ein senkrechtes Label ist writing-mode: vertical-rl meist besser als rotate(90deg), weil es auch das Layout ändert: Das Element nimmt senkrechten Platz ein, statt zu überlappen. Nimm rotate für kleine dekorative Neigungen.

Verwandte Konzepte