CSS mit Adi Prinz

Grundlagen der 3D-Transformationen

Elemente im dreidimensionalen Raum transformieren

Mit CSS-3D-Transformationen können Elemente nicht nur entlang der x- und y-Achse, sondern zusätzlich entlang der z-Achse verschoben, gedreht und skaliert werden.

Dadurch entsteht der Eindruck räumlicher Tiefe. Elemente können beispielsweise nach vorne oder hinten verschoben, wie eine Karte umgedreht oder als räumlicher Würfel dargestellt werden.

Achse	Richtung	Typische Funktionen
x-Achse	Waagrecht: links und rechts	`translateX()`, `rotateX()`, `scaleX()`
y-Achse	Senkrecht: oben und unten	`translateY()`, `rotateY()`, `scaleY()`
z-Achse	Räumliche Tiefe: zum Betrachter oder vom Betrachter weg	`translateZ()`, `rotateZ()`, `scaleZ()`

Positive Werte entlang der z-Achse bewegen ein Element normalerweise zum Betrachter. Negative Werte bewegen es vom Betrachter weg.

Das dreidimensionale Koordinatensystem

Die x- und y-Achse verlaufen auf der Fläche des Bildschirms. Die z-Achse steht senkrecht auf dieser Fläche und erzeugt die räumliche Tiefe.

Die x-Achse verläuft von links nach rechts.
Die y-Achse verläuft von oben nach unten.
Die z-Achse verläuft vom Bildschirm zum Betrachter beziehungsweise vom Betrachter weg.

Anders als in vielen mathematischen Koordinatensystemen zeigen positive y-Werte im CSS-Layout normalerweise nach unten.

Unterschied zwischen 2D und 3D

2D-Transformation	3D-Transformation
Verwendet hauptsächlich die x- und y-Achse.	Bezieht zusätzlich die z-Achse ein.
Beispiel: `translate(40px, 20px)`	Beispiel: `translate3d(40px, 20px, 60px)`
Beispiel: `rotate(30deg)`	Beispiel: `rotateY(30deg)`
Räumliche Tiefe ist nicht unmittelbar sichtbar.	Räumliche Tiefe wird häufig mit `perspective` sichtbar gemacht.

Wichtige Eigenschaften und Funktionen

Eigenschaft oder Funktion	Aufgabe
`translateZ()`	Verschiebt ein Element entlang der z-Achse.
`translate3d()`	Verschiebt ein Element entlang aller drei Achsen.
`rotateX()`, `rotateY()`, `rotateZ()`	Drehen ein Element um die jeweilige Achse.
`rotate3d()`	Beschreibt eine Drehung um eine frei bestimmte räumliche Achse.
`scale3d()`	Skaliert ein Element entlang aller drei Achsen.
`perspective`	Bestimmt den räumlichen Betrachtungsabstand.
`perspective-origin`	Bestimmt die Position des Betrachters.
`transform-style`	Legt fest, ob untergeordnete Elemente im 3D-Raum dargestellt werden.
`backface-visibility`	Bestimmt, ob die Rückseite eines Elements sichtbar ist.

Ein erstes 3D-Beispiel

Im folgenden Beispiel wird eine Box um die y-Achse gedreht. Durch die Perspektive entsteht der Eindruck räumlicher Tiefe.

rotateY(45deg)

.perspective-demo {
  perspective: 600px;
}

.rotate-y-first {
  transform: rotateY(45deg);
}

Ohne eine Perspektive ist eine 3D-Drehung zwar vorhanden, ihre räumliche Wirkung kann jedoch deutlich schwächer erscheinen.

Räumliche Perspektive festlegen

Die Entfernung zwischen Betrachter und Element

Mit perspective wird festgelegt, aus welcher Entfernung eine 3D-Szene betrachtet wird. Erst dadurch wird die räumliche Tiefe vieler 3D-Transformationen deutlich sichtbar.

.container {
  perspective: 600px;
}

Die Eigenschaft wird normalerweise dem übergeordneten Element gegeben. Sie wirkt dann auf die transformierten Kindelemente.

Ein kleiner Wert erzeugt eine stärkere räumliche Verzerrung.
Ein großer Wert erzeugt eine schwächere und flachere räumliche Wirkung.
Der Wert muss größer als 0 sein.
Der Ausgangswert ist none. Es wird dann keine Perspektive durch diese Eigenschaft erzeugt.

Ein kleiner perspective-Wert bedeutet nicht wenig Perspektive, sondern einen kleinen Betrachtungsabstand und damit eine stärkere räumliche Wirkung.

Unterschiedliche perspective-Werte vergleichen

In allen folgenden Beispielen wird die Box mit rotateY(55deg) gleich stark gedreht. Nur der Betrachtungsabstand unterscheidet sich.

Starke Perspektive

250px

.perspective-small {
  perspective: 250px;
}

Mittlere Perspektive

600px

.perspective-medium {
  perspective: 600px;
}

Schwache Perspektive

1200px

.perspective-large {
  perspective: 1200px;
}

Sehr kleine Werte können zu einer extremen Verzerrung führen. Für viele Benutzeroberflächen sind Werte zwischen ungefähr 500px und 1200px ein brauchbarer Ausgangspunkt.

Eigenschaft perspective und Funktion perspective()

Die Perspektive kann entweder mit der CSS-Eigenschaft perspective am Elternelement oder mit der Funktion perspective() innerhalb von transform angegeben werden.

Schreibweise	Wirkung
.container { perspective: 600px; }	Erzeugt für die transformierten Kindelemente eine gemeinsame Perspektive.
.element { transform: perspective(600px) rotateY(45deg); }	Die Perspektive wird direkt als Teil der Transformation dieses Elements angewendet.

Die Eigenschaft perspective und die Funktion perspective() sind nicht in jeder Situation austauschbar. Bei mehreren Elementen erzeugt die Eigenschaft am gemeinsamen Elternelement eine zusammenhängende räumliche Szene.

Bei der Funktion perspective() ist außerdem die Reihenfolge innerhalb von transform wichtig:

.element {
  transform: perspective(600px) rotateY(45deg);
}

Den Betrachtungspunkt mit perspective-origin verschieben

Mit perspective-origin wird festgelegt, von welcher Position aus der Betrachter auf die 3D-Szene blickt.

Der Standardwert ist:

.container {
  perspective-origin: 50% 50%;
}

Das entspricht:

.container {
  perspective-origin: center center;
}

Der erste Wert bestimmt die waagrechte Position, der zweite Wert die senkrechte Position des Betrachtungspunkts.

Wert	Betrachtungsposition
`center center`	Mitte des perspektivischen Bereichs
`left center`	Von der linken Seite
`right center`	Von der rechten Seite
`center top`	Von oben
`center bottom`	Von unten
`25% 75%`	Ein Viertel der Breite von links und drei Viertel der Höhe von oben

perspective-origin verschiebt nicht das Element selbst. Die Eigenschaft verändert den Standpunkt, von dem aus die räumliche Szene betrachtet wird.

Unterschiedliche Betrachtungspunkte vergleichen

In allen Beispielen gelten dieselbe Perspektive und dieselbe Drehung. Nur perspective-origin wird verändert.

Betrachtung aus der Mitte

center center

.origin-view-center {
  perspective: 600px;
  perspective-origin: center center;
}

Betrachtung von links oben

left top

.origin-view-top-left {
  perspective: 600px;
  perspective-origin: left top;
}

Betrachtung von rechts

right center

.origin-view-right {
  perspective: 600px;
  perspective-origin: right center;
}

Betrachtung von unten

center bottom

.origin-view-bottom {
  perspective: 600px;
  perspective-origin: center bottom;
}

perspective-origin und transform-origin unterscheiden

Eigenschaft	Aufgabe	Typischer Einsatzort
`perspective-origin`	Bestimmt den Betrachtungspunkt der perspektivischen Darstellung.	Perspektivisches Elternelement
`transform-origin`	Bestimmt den Ausgangs- beziehungsweise Drehpunkt einer Transformation.	Transformiertes Element

.scene {
  perspective: 600px;
  perspective-origin: center top;
}

.card {
  transform-origin: left center;
  transform: rotateY(45deg);
}

perspective-origin bestimmt, wo sich der Betrachter befindet. transform-origin bestimmt dagegen, um welchen Punkt sich das Element dreht oder skaliert.

3D-Transformationen

CSS Module

css mit Adi Prinz