CSS-Transformationen

Das Modul CSS transforms definiert, wie Elemente, die mit CSS gestaltet wurden, im zwei- oder dreidimensionalen Raum transformiert werden können.

CSS-Transformationen in Aktion

Verwenden Sie die Schieberegler im folgenden Beispiel, um die Eigenschaften für translation, rotation, scale und skew von CSS-Transformationen des Würfels im 3D-Raum zu verändern. Beobachten Sie, wie der Würfel im 3D-Raum mit dem Element beschriftet als z:0px interagiert, das an der 3D-Position (0, 0, 0) liegt.

Sie können auch den perspective-Schieberegler verwenden, um die perspective-Eigenschaft des Containers des Würfels zu ändern, die den Abstand zwischen Ihnen und der z=0-Ebene bestimmt.

Die Schieberegler für perspective-origin bestimmen, wo Sie als Betrachter in den 3D-Raum blicken, um den Fluchtpunkt der Ansicht zu bestimmen. Dieser Fluchtpunkt wird durch einen kleinen roten Punkt dargestellt. Sie können sich vorstellen, dass Sie durch das Ändern dieser Regler physisch Ihren Kopf nach oben, unten, links oder rechts bewegen, um verschiedene Teile des Würfels zu sehen, ohne den Würfel selbst zu bewegen.

Das Kontrollkästchen backface-visibility legt fest, ob die Rückseiten des Würfels auf visible oder hidden gesetzt sind.

Der Würfel im obigen Beispiel besteht aus sechs <div>-Elementen, die alle mit CSS gestaltet sind, um die Seiten des Würfels zu bilden. Der Würfel wird nicht mit einem 2D- oder 3D-Canvas-Kontext gezeichnet, sodass Sie die Seiten des Würfels mit den Entwicklerwerkzeugen Ihres Browsers inspizieren können, wie Sie es mit jedem anderen DOM-Element tun würden. Versuchen Sie, das Element-Auswahlwerkzeug der Entwicklerwerkzeuge Ihres Browsers zu verwenden, um verschiedene Seiten des Würfels zu inspizieren, während Sie dessen Position und Rotation transformieren.

Hinweis: Die Reihenfolge, in der Transformationen, einschließlich 3D-Rotationen, angewendet werden, beeinflusst die resultierende Transformation. Im obigen Beispiel werden Transformationen in der Reihenfolge Translation, Skalierung, Rotation und dann Scherung angewendet. Die Rotationen werden in der Reihenfolge X → Y → Z durchgeführt.

Referenz

Eigenschaften

Funktionen

Datentypen

Leitfäden

Verwendung von CSS-Transformationen

Schritt-für-Schritt-Anleitung, wie man mit CSS gestylte Elemente transformieren kann.

Koordinatensysteme

Beschreibt, wie Pixel-Positionen im CSS-Objektmodell definiert werden.

Performance-Grundlagen: CSS-Transformationen nutzen

Ein Überblick über die Grundlagen der Web-Performance, einschließlich wie CSS-Transformationen die Leistung verbessern können.

Matrix-Mathematik fürs Web

Beschreibt, wie Objekttransformationen durch mathematische Matrizen dargestellt werden können.

Verwandte Konzepte

Spezifikationen

Specification
CSS Transforms Module Level 1
CSS Transforms Module Level 2

Siehe auch