CSS transforms

Das CSS transforms-Modul definiert, wie Elemente, die mit CSS gestaltet sind, in zwei- oder dreidimensionalem Raum transformiert werden können.

CSS-Transformationen in Aktion

Verwenden Sie die Schieberegler im folgenden Rahmen, um die translation, rotation, scale und skew CSS-Transformations-Eigenschaften des Würfels im 3D-Raum zu ändern. Achten Sie darauf, wie der Würfel mit dem Element mit der Bezeichnung z:0px interagiert, das sich an der 3D-Position (0, 0, 0) befindet, während Sie ihn durch den 3D-Raum bewegen.

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

Die perspective-origin-Schieberegler bestimmen, wo Sie in den 3D-Raum schauen, um den Fluchtpunkt der Ansicht festzulegen. Dieser Fluchtpunkt wird durch einen kleinen roten Punkt angezeigt. Sie können sich vorstellen, wie der physische Vorgang, Ihren Kopf nach oben, unten, links und rechts zu bewegen, um verschiedene Teile des Würfels zu sehen, ohne den Würfel selbst zu bewegen, wenn Sie diese Schieberegler verändern.

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

Der Würfel im obigen Beispiel besteht aus sechs <div>-Elementen, die alle mit CSS gestaltet sind, um die Flächen des Würfels zu bilden. Der Würfel wird nicht mit einem 2D- oder 3D-Canvas-Kontext gezeichnet, so dass Sie die Flächen des Würfels mit den Entwicklertools Ihres Browsers inspizieren können, wie Sie es mit jedem anderen DOM-Element tun würden. Verwenden Sie das Elementauswahlwerkzeug der Entwicklertools Ihres Browsers, um verschiedene Flächen 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 übersetzt, skaliert, dann rotiert und schließlich verzerrt. Die Rotationen werden in der Reihenfolge X → Y → Z angewendet.

Sie können den Quellcode dieses Beispiels auf GitHub ansehen.

Referenz

Eigenschaften

Funktionen

Datentypen

Leitfäden

Verwendung von CSS-Transformationen

Schritt-für-Schritt-Anleitung, wie man Elemente mit CSS transformiert.

Koordinatensysteme

Beschreibt, wie Pixellokationen im CSS-Objektmodell definiert sind.

Leistungsfundamentals: Verwenden Sie CSS-Transformationen

Ein Überblick über die Grundlagen der Web-Performance, einschließlich der Verbesserung der Performance durch CSS-Transformationen.

Matrix-Mathematik für das Web

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

Relevante Konzepte

Spezifikationen

Specification
CSS Transforms Module Level 1
CSS Transforms Module Level 2

Siehe auch