Transform/3D-Transforms

30min

mittel

Kenntnisse in
• CSS
• CSS-Transforms

Webseiten sind wie Printprodukte zweidimensional. Trotzdem kann es Design und Benutzerführung verbessern, wenn man den Eindruck räumlicher Tiefe vermittelt. Benutzer erkennen z. B. Buttons eher, wenn sie Knöpfen und Schaltern aus dem wirklichen Leben ähneln.

Neben einem Schattenwurf mit box-shadow können dreidimensionale Objekte mit 3D-Transforms gezeichnet werden. Die dafür nötigen 3D-Funktionen wurden bereits in den letzten Kapiteln vorgestellt – sie werden durch eine perspektivische Ansicht und weitere Eigenschaften zur Gestaltung erweitert.

Auch wenn sich SVG zum Zeichnen von Grafikobjekten anbietet, ist das SVG-Element selbst nur eine zweidimensionale Zeichenfläche. Elemente einer Webseite können dagegen frei in alle drei Richtungen positioniert werden und erhalten durch das Hinzufügen einer Perpektive räumliche Tiefenwirkung.

Tiefenwirkung

Wie Sie aus den vergangenen Kapiteln gesehen haben, bewirkt die Rotation eines Vierecks eigentlich nur die Verformung zu einem Trapez. Erst der Vergleich mit anderen Grafikobjekten aus einem weiter entfernten Blickwinkel lässt eine dreidimensionale Wirkung zu.

perspective

Dies erreicht man entweder mit der perspective()-Funktion oder mit der entsprechenden perspective-Eigenschaft. Sie bestimmen die Entfernung zwischen der Z-Ebene und dem Betrachter, um 3D-Objekten räumliche Tiefe zu geben.

3D-Objekte mit z>0 werden größer, Objekte mit z<0 kleiner. 3D-Objekte, deren z-Achsenwert größer ist als der Wert von perspective, befinden sich hinter dem Betrachter und werden deshalb nicht angezeigt. Durch die Angabe eines anderen Werts als 0 und none erzeugen Sie einen neuen Stapelkontext (stacking context).

Perspektive mit 3D-Transforms ansehen …

.red {
  background: #c82f04;
  transform: perspective(600px) rotateY(45deg);
}

.scene2 {
  perspective: 400px;
}

.yellow {
  background: #dfac20;
  animation: rotation 5s infinite alternate;
}
 
@keyframes rotation {
	0 {
		rotate: Y 0;
	}
	100% {
		rotate: Y -89deg;
	}
}

Das linke rote Quadrat wird mit 2 Funktionen innerhalb der transform-Eigenschaft transformiert:

1. zuerst wird es um 45° gedreht
2. dann erhält das rote Quadrat mit der perspective(600px)-Funktion eine räumliche Tiefe.

Das rechte gelbe Quadrat wird mit der „neuen“ rotate-Eigenschaft gedreht. Während der erste Wert die Y-Achse angibt, wird der zweite Wert in einer Animation von 0 auf -89° und wieder zurück gedreht.

Beachten Sie, dass die perspective-Eigenschaft hier für das Elternelement festgelegt wird. Sie hat keinen Einfluss auf die Darstellung des Elements, sie liefert nur eine räumliche Dimension für Kindelemente.

perspective-origin

Die perspective-origin-Eigenschaft legt die Position des Betrachters eines transformierten Elements fest. Wie bei perspective muss sie für das Elternelement deklariert werden:

Standardwert ist die Mitte des Elements, kann aber durch Schlüsselwörter wie left, right, top … oder Längenangaben verändert werden.

Blickwinkel verändern mit 3D-Transforms ansehen …

.stage {
	perspective: 600px;
	perspective-origin: var(--origin);	
	--origin: center center;
}

.panel {
  width: 100%;
  height: 100%;
  transform: perspective(600px) rotateY(45deg);
}

Mit den Schiebereglern können die Werte für perspective-origin verändert werden.