Lädt...

CSS-Transforms

Übergänge legen fest, wie lange eine Änderung dauert. Transforms legen fest, wohin die Pixel gehen: Chip seitlich schieben, Loader drehen, Badge beim Hover vergrößern — meist ohne Nachbarn zu verschieben wie bei margin oder top.

Was transform verändert

transform wendet eine 2D-Abbildung (später 3D) auf die gezeichnete Box an. Im Layout-Flow bleibt der Platz oft gleich. translate() eignet sich für Mikrobewegungen: Hover, Toggle, kleine Korrekturen.

Eine Eigenschaft, viele Funktionen — keine Komma-Listen innerhalb eines transform-Werts; Funktionen ketten Sie mit Leerzeichen: transform: translateX(1rem) rotate(8deg) scale(1.05);

Zentrale 2D-Funktionen

📊 2D-Transform-Funktionen im Überblick

Funktion	Typische Aufgabe
`translate(x, y)` / `translateX` / `translateY`	Visuell verschieben ohne Reflow-Drama
`rotate(Winkel)`	Icons, Pfeile, Loader drehen (`deg`, `turn`)
`scale(x, y)` / `scale(n)`	Hover-Betonung — Werte maßvoll
`skew(x, y)`	Seltene Neigung — kleine Winkel

Winkel in deg oder turn. Prozent in translate() beziehen sich auf die eigene Elementgröße.

Zuerst translate

Für einen visuellen Stoß nutzen Sie translate vor top/margin. Mit transition aus der letzten Lektion wirkt Bewegung oft flüssiger.

Chip nudge on hover

css

.chip {
display: inline-block;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: #e0e7ff;
color: #1e3a8a;
transition: transform 0.2s ease, background-color 0.2s ease;
}

.chip:hover,
.chip:focus-visible {
transform: translateY(-0.15rem);
background: #c7d2fe;
}

Der Chip hebt sich visuell; die Zeilenbox bleibt. Mit negativem margin-top auf Hover springen Nachbarn.

rotate und scale kombinieren

Icons und Badges verbinden oft kleines scale mit rotate. Enge Winkel wirken professionell.

Badge pop and chevron spin

css

.badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.875rem;
transition: transform 0.25s ease;
}

.badge:hover {
transform: scale(1.06);
}

.chevron {
display: inline-block;
transition: transform 0.2s ease;
}

.menu-open .chevron {
transform: rotate(180deg);
}

scale(1.06) betont; scale(2) wirkt wie ein Fehler. rotate(180deg) signalisiert „geöffnet“ — per Klasse steuern.

transform-origin — Drehpunkt

Standard ist die Mitte. transform-origin verschiebt den Drehpunkt — unten links wie eine Tür, 50% 100% für Tabs.

Hinge from bottom edge with transition

css

.panel-tilt {
transform-origin: 50% 100%;
transition: transform 0.35s ease;
}

.panel-tilt.is-open {
transform: rotateX(12deg);
}

Leichtes rotateX als Vokabular. Volles 3D in der optionalen 3D Transforms-Lektion — hier zählt origin.

Mit transition; Layout meiden

transition auf der Basisregel; transform (und opacity) animieren. prefers-reduced-motion: reduce respektieren.

Selbst ausprobieren

Button mit translateY(-0.2rem) heben — dann margin-top vergleichen.
Chevron bei .is-open um 180deg drehen.
transform-origin: left center mit kleinem rotate testen.
translateX(0.5rem) scale(1.04) in einem transform.
Reduced motion emulieren.

Typische Fehler

top/margin statt translate für Hover-Lift
Große rotate auf Wrappern
transform-origin vergessen
scale(0) ohne Accessibility-Plan
Schweres 3D ohne Bedarf

Zusammenfassung

transform bewegt die gezeichnete Box; Flow bleibt meist
Funktionen in einem transform verkettet
transform-origin = Drehpunkt
Mit transition kombinieren
Als Nächstes: CSS-Animationen (@keyframes)

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓

Fragen

🎯

70%

Zum Bestehen

♾️

∞

Zeit

🔄

∞

Versuche

📝 Anweisungen

Lesen Sie jede Frage sorgfältig
Wählen Sie die beste Antwort für jede Frage
Sie können das Quiz so oft wiederholen, wie Sie möchten
Ihr Fortschritt wird oben angezeigt

Sprache