Lädt...

CSS 3D-Transforms

Optional Advanced hat gerade Zeiger, Caret und natives Chrome justiert. Diese letzte optionale Lektion ist ein anderes Werkzeug: 3D-Transforms. Eine Karte bekommt einen Fluchtpunkt und kippt in die Tiefe. Du wiederholst nicht die 2D-Hover-Lektion mit translate / scale und wählst weder Cursor noch Resize-Griff.

Direkte Antwort

CSS-3D-Transforms nutzen dieselbe transform-Eigenschaft wie 2D, plus Tiefe. Setze perspective auf ein Elternelement, damit Kinder einen gemeinsamen Fluchtpunkt haben (perspective-origin verschiebt ihn). rotateX und rotateY kippen um die horizontale und vertikale Achse; rotateZ ist die bekannte flache Drehung. translateZ bewegt sich zum Betrachter oder weg. transform-style: preserve-3d hält Kinder in einer Szene statt sie flachzudrücken. backface-visibility: hidden versteckt eine Fläche, die sich abwendet — nützlich für eine zweiseitige Karte. Der Layout-Platz bleibt wie in 2D. Halte Winkel klein. Respektiere prefers-reduced-motion.

Warum das weder 2D-Bewegung noch UI-Chrome ist

Die 2D-Transforms-Lektion lehrte Bewegung in der Ebene: translate, rotate, scale, skew und transform-origin als Scharnier. Das gilt weiter. 3D bringt eine kameraähnliche perspective und Extra-Achsen. User-Interface-CSS war Interaktions-Chrome (cursor, resize, caret-color, appearance). Eine gedrehte Karte braucht keine lügende Hand, und ein Textarea-Griff ist kein Fluchtpunkt. Reicht ein 2-Pixel-Hub, bleib bei 2D.

Perspective — Kamera auf das Elternelement

perspective ist eine Länge: kleinere Werte wirken näher und dramatischer, größere flacher. Setze sie auf die Bühne, nicht auf jede Fläche, damit Geschwister einen Fluchtpunkt teilen.

Perspective on the parent

css 
.stage {
perspective: 800px;
perspective-origin: 50% 40%;
}

.card-3d {
transform: rotateY(18deg);
transform-origin: center;
}

Du kannst auch transform: perspective(800px) rotateY(18deg) auf ein Element schreiben. Diese Kamera gehört nur zu dieser Box. Für einen Würfel oder eine Kachelreihe ist Eltern-perspective ruhiger. perspective-origin ist der Fluchtpunkt-Cousin von transform-origin — es ersetzt nicht den Pivot der drehenden Fläche.

Achsen — rotateX, rotateY, rotateZ

Denk an ein Buch. rotateY schwingt den Deckel links–rechts. rotateX nickt ihn zu dir oder weg. rotateZ dreht auf der Seite — das 2D-rotate(), das du kennst.

rotateX rotateY rotateZ

css 
.tile-y {
transform: rotateY(-22deg);
}

.tile-x {
transform: rotateX(12deg);
}

.tile-z {
transform: rotateZ(8deg);
}

Kette bei Bedarf mit 2D-Funktionen: rotateY(16deg) translateZ(24px). Die Reihenfolge zählt — spätere Funktionen laufen im lokalen Raum der früheren. Eine transform-Liste reicht, wie in 2D. Großes rotateX(80deg) auf einem ganzen Artikel ist Jahrmarkt, keine UI.

translateZ — Abstand, kein Layout-Schub

Mit Perspective kommt positives translateZ oft zum Betrachter. Nachbarn im Dokument rücken nicht; nur die Malerei bewegt sich, wie 2D-translate.

translateZ in a 3D scene

css 
.stage {
perspective: 900px;
}

.pop-face {
transform: translateZ(40px) rotateY(-8deg);
}

.back-face {
transform: translateZ(-28px);
}

Nutze translateZ, um Szenenflächen zu trennen, nicht um margin oder gewöhnliches z-index zu faken. z-index ordnet überlappende Boxen im 2D-Layout; 3D-Abstand ist ein anderer Knopf. Ist der Job „Chip um 2px heben“, reicht translateY aus der 2D-Lektion.

preserve-3d — Szene halten, nicht plätten

Standardmäßig plättet ein Elternelement transformierte Kinder (transform-style: flat). Die 3D-Beziehung geht verloren. Für Würfel, gestapelten Deckel oder zweiseitige Karte setze preserve-3d auf den drehenden Wrapper.

preserve-3d on the scene

css 
.scene {
perspective: 700px;
}

.rig {
transform-style: preserve-3d;
transition: transform 0.45s ease;
}

.rig.is-flipped {
transform: rotateY(180deg);
}

.face {
position: absolute;
inset: 0;
backface-visibility: hidden;
}

Jeder Vorfahr, der Tiefe halten soll, braucht preserve-3d — ein vergessenes flat stampft den Würfel zum Poster. Üblich: perspective außen, preserve-3d innen am Gestell: Kamera draußen, Gelenke drinnen.

backface-visibility — die Rückseite verstecken

Dreht sich eine Fläche über 90°, sähest du sie sonst gespiegelt. backface-visibility: hidden blendet die Rückseite aus. Zwei Flächen: vorn rotateY(0), hinten rotateY(180deg), beide position: absolute auf demselben Gestell.

Card flip with backface-visibility

css 
.card-rig {
position: relative;
transform-style: preserve-3d;
}

.card-front,
.card-back {
position: absolute;
inset: 0;
backface-visibility: hidden;
}

.card-back {
transform: rotateY(180deg);
}

Ohne versteckte Rücken siehst du ein Gespenst der Vorderseite. Das ist nicht user-select: none und nicht appearance: none. Du versteckst eine gemalte Fläche in 3D, du ziehst keinem Checkbox das Fell ab.

3D vs. 2D-Transform vs. UI-Chrome

📊 3D vs 2D transform vs UI chrome

Tool Job Poor fit
perspective + rotateX / rotateY / translateZ Tiefenszene: Kipp, Abstand, gemeinsamer Fluchtpunkt Alltagshover um 2px; Zeigerform
2D translate / rotate / scale / skew Bewegung in der Ebene; Origin-Scharnier Würfel ohne preserve-3d
transform-style / backface-visibility Verschachtelte 3D-Flächen; Rückseiten ausblenden Caret-Farbe; Textarea-Resize
UI (cursor, resize, appearance…) Interaktions-Chrome an Steuerelementen Fluchtpunkte; Kartenumdrehen

Optional Advanced hat schon Steuerelemente gestylt. Effects & Motion hat 2D-Abbildung gelehrt. Hier kommt die Tiefen-Schicht auf transform. cursor: pointer auf einer Überschrift, weil sie rotateY hat, macht sie nicht 3D. perspective auf einem Login ersetzt nicht resize am Notizfeld.

Ruhige Gewohnheiten

Halte Perspective für UI-Karten im Bereich einiger hundert Pixel (600px–1200px ist vernünftig). Setze nicht perspective: 40px auf body. Kombiniere :hover oder Klassen mit kurzem transition auf transform — wie in 2D. Dämpfe mit prefers-reduced-motion: reduce (none oder kleiner 2D-Nudge). Tastaturfokus braucht weiter einen sichtbaren Ring; ein Flip ist kein Fokus-Stil.

Modest 3D hover not a 2D lift

css 
.preview {
perspective: 1000px;
}

.preview .plate {
transition: transform 0.3s ease;
}

.preview:hover .plate {
transform: rotateY(-10deg) rotateX(4deg);
}

@media (prefers-reduced-motion: reduce) {
.preview .plate,
.preview:hover .plate {
transition: none;
transform: none;
}
}

Dieser Hover ist ein Kipp, nicht der 2D-Chip-Hub translateY(-0.15rem) und nicht resize: vertical am Feld. Wollen Nutzer mit weniger Bewegung eine ruhige Karte, glaub ihnen.

Selbst ausprobieren

  1. Wickle eine Karte in .stage { perspective: 800px; } und setze rotateY(20deg) auf das Kind — dann lege perspective in das transform des Kindes und vergleiche Geschwisterkacheln.
  2. Baue eine zweiseitige Karte: preserve-3d am Gestell, backface-visibility: hidden auf beiden Flächen, Rückseite rotateY(180deg).
  3. Setze translateZ(32px) auf die Vorderfläche; prüfe, dass Layout-Nachbarn nicht rücken.
  4. Flippe per Klasse + transition: transform — dann plätte mit prefers-reduced-motion.
  5. Löse das nicht mit cursor, resize oder nur 2D-translateY.

Typische Fehler

  • perspective: 50px auf body, bis die ganze Seite verzerrt
  • preserve-3d am Wrapper vergessen und sich wundern, dass der Würfel flach ist
  • Den 2D-Chip-Hub (translateY) für eine 3D-Lektion halten
  • UI-Chrome (cursor, resize, appearance) als Tiefenersatz
  • backface-visibility auf der Bühne statt auf den Flächen
  • prefers-reduced-motion bei großen rotateY-Flips ignorieren
  • Erwarten, dass 3D den Dokumentfluss wie margin ändert

Zusammenfassung

  • 3D-Transforms geben transform Tiefe: Perspective, rotateX / rotateY, translateZ
  • Perspective auf die Eltern-Szene; preserve-3d, damit verschachtelte Flächen im Raum bleiben
  • backface-visibility: hidden versteckt eine abgewandte Fläche
  • Weder 2D-Hover-Hub noch User-Interface-Chrome
  • Winkel klein halten; reduzierte Bewegung achten
  • Letzte CSS-Lektion dieses Kurses — Optional Advanced endet hier; kein weiterer CSS-Slug in der Karte

🧠 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

❓
7
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
Thema 76 von 76
Css Tutorial