CSS Transforms (2D & 3D)

CSS Transforms sind eine CSS-Eigenschaft, die Elemente im 2D- oder 3D-Raum transformieren – verschieben, drehen, skalieren und verzerren – ohne den Dokumentfluss zu verändern und ohne Layout-Reflow auszulösen.

Was sind CSS Transforms?

Die transform-Eigenschaft ist die wichtigste Einzeleigenschaft im Web-Animationsbereich. Sie ermöglicht geometrische Transformationen, die ausschließlich auf der Compositing-Ebene des Browsers stattfinden – das bedeutet: maximale Performance, da kein Reflow oder Repaint der Seite ausgelöst wird.

Transforms sind die bevorzugte Methode, um Elemente zu bewegen (statt margin, left, top), zu skalieren (statt width/height) und zu rotieren. In Kombination mit CSS Animationen (@keyframes) oder CSS Transitions entstehen hochperformante Animationen.

Erklärung

2D-Transformationen

```css / Verschieben / transform: translate(100px, 50px); / X und Y / transform: translateX(100px); / nur horizontal / transform: translateY(-20px); / nur vertikal /

/ Skalieren / transform: scale(1.5); / gleichmäßig / transform: scaleX(2); / nur horizontal strecken / transform: scaleY(0.5); / vertikal stauchen /

/ Drehen / transform: rotate(45deg); / im Uhrzeigersinn / transform: rotate(-0.25turn); / Viertelkreis gegen Uhrzeigersinn / transform: rotate(0.5rad); / in Radiant /

/ Verzerren (Skew) / transform: skew(15deg, 5deg); transform: skewX(20deg);

/ Mehrere kombinieren / transform: translateX(50px) rotate(15deg) scale(1.2); ```

Wichtig bei Kombination: Transforms werden von links nach rechts angewendet, und die Reihenfolge beeinflusst das Ergebnis. translateX(50px) rotate(45deg) ist nicht dasselbe wie rotate(45deg) translateX(50px).

Transform-Origin

transform-origin legt den Drehpunkt einer Transformation fest:

```css / Standard: Mittelpunkt / transform-origin: center; / 50% 50% /

/ Ecken / transform-origin: top left; / 0 0 / transform-origin: bottom right; / 100% 100% /

/ Präzise Angaben / transform-origin: 20px 80%;

/ Für 3D auch Z-Achse / transform-origin: center center -50px; ```

3D-Transformationen

3D-Transforms fügen die Z-Achse hinzu und ermöglichen echte Tiefenwirkung:

```css / 3D-Verschiebung / transform: translate3d(100px, 50px, -200px); transform: translateZ(-100px); / in die Tiefe /

/ 3D-Rotation / transform: rotateX(45deg); / um horizontale Achse kippen / transform: rotateY(180deg); / um vertikale Achse drehen / transform: rotateZ(30deg); / entspricht rotate() / transform: rotate3d(1, 1, 0, 45deg); / um beliebige Achse /

/ Perspective als Funktion / transform: perspective(800px) rotateY(45deg); ```

Perspektive mit perspective-Eigenschaft

Für ganze Szenen mit mehreren 3D-Elementen setzt man perspective auf den Container:

```css .scene { perspective: 800px; / Abstand des Betrachters / perspective-origin: center; / Blickwinkel-Position / }

.karte { transform-style: preserve-3d; / 3D-Kontext für Kind-Elemente / transition: transform 0.6s ease; }

.karte:hover { transform: rotateY(180deg); } ```

Beispiele

Karten-Flip-Effekt

```css .karte-container { perspective: 1000px; width: 300px; height: 200px; }

.karte { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); }

.karte:hover { transform: rotateY(180deg); }

.karte-vorderseite, .karte-rückseite { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 12px; }

.karte-rückseite { transform: rotateY(180deg); background: #0078ff; } ```

Entrance-Animation mit translate

```css @keyframes einblenden { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.abschnitt { animation: einblenden 0.6s ease-out both; } ```

CSS-Würfel (3D)

```css .würfel { width: 100px; height: 100px; transform-style: preserve-3d; animation: würfelDrehen 4s linear infinite; }

@keyframes würfelDrehen { from { transform: rotateX(0) rotateY(0); } to { transform: rotateX(360deg) rotateY(360deg); } }

.seite { position: absolute; width: 100px; height: 100px; } .vorne { transform: translateZ(50px); } .hinten { transform: rotateY(180deg) translateZ(50px); } .links { transform: rotateY(-90deg) translateZ(50px); } .rechts { transform: rotateY(90deg) translateZ(50px); } .oben { transform: rotateX(90deg) translateZ(50px); } .unten { transform: rotateX(-90deg) translateZ(50px); } ```

In der Praxis

CSS Transforms sind das Fundament der meisten Web-Animationen. Einige wichtige Praxisregeln:

Hardware-Beschleunigung wird aktiviert, sobald ein Element eine 3D-Transform verwendet oder animiert wird. Für 2D-Animationen kann man dies erzwingen:

``css .animiertes-element { will-change: transform; /* Hinweis an den Browser */ transform: translateZ(0); /* "Null-Transform" für Compositing-Layer */ } ``

will-change sollte sparsam eingesetzt werden – bei zu vielen Elementen verbraucht es übermäßig GPU-Speicher.

Koordinatensystem: Das Koordinatensystem von transform ist relativ zum Element selbst, nicht zum Dokument. Bei transform: translateX(100%) wird das Element um seine eigene Breite verschoben.

Mehr Performance-Details unter Performance-Optimierung bei Web-Animationen.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Warum verschwindet mein 3D-Element beim Rotieren? Prüfen Sie backface-visibility: hidden – ohne diese Eigenschaft ist die Rückseite sichtbar und erscheint gespiegelt.

Warum wird mein transformiertes Element von anderen Elementen überlagert? Transforms erzeugen einen neuen Stacking Context. Passen Sie z-index am Container an.

Kann ich Transforms bei SVG-Elementen nutzen? Ja, aber mit Einschränkungen. transform-origin verhält sich in SVG-Koordinaten anders. Für SVG-Animationen siehe SVG Animationen.

Wie viele Transforms kann ich kombinieren? Technisch unbegrenzt, aber jede zusätzliche Funktion erhöht die Matrixberechnung. In der Praxis sind 3–4 Funktionen üblich.

Verwandte Einträge

• CSS Animationen (@keyframes) – @keyframes mit transform-Werten
• CSS Transitions – Transitions für transform-Eigenschaften
• Performance-Optimierung bei Web-Animationen – Warum transform GPU-beschleunigt ist
• SVG Animationen – Transforms in SVG-Kontext
• Three.js – 3D im Browser – Wenn 3D im Browser mehr sein soll als CSS

Weiterführend

• MDN Web Docs: transform – CSS (2024) – developer.mozilla.org
• MDN: Using CSS transforms – developer.mozilla.org
• Cassie Evans: Transforms on SVG Elements (2021) – cassie.codes
• W3C: CSS Transforms Module Level 1 & 2 – w3.org
• CSS Tricks: A Comprehensive Guide to CSS Transforms – css-tricks.com