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
- CSS-Eigenschaften:
- Datentypen:
- Glossarbegriffe:
- SVG-Konzepte:
<animate>
-Element<animateTransform>
-Element<set>
-Elementtransform
-Element
Spezifikationen
Specification |
---|
CSS Transforms Module Level 1 |
CSS Transforms Module Level 2 |
Siehe auch
- Grundlegende SVG-Transformationen-Tutorial
- CSS-Animationen-Modul
- CSS-Übergänge-Modul