CSS3 3D-Transformationen
CSS3 können Sie Ihre Elemente mit Hilfe von 3D-Transformationen zu formatieren.
Maus über die unten Elemente den Unterschied zwischen einer 2D- und einer 3D-Transformation, um zu sehen:
Browser-Unterstützung für 3D-Transformationen
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen , gefolgt von -webkit-, -moz- oder -o- die erste Version an , die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| transform | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-origin (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective-origin | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| backface-visibility | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
CSS3 3D-Transformationen
In diesem Kapitel werden Sie über die folgenden 3D-Transformationsverfahren lernen:
-
rotateX() -
rotateY() -
rotateZ()
Die rotateX() Methode
Die rotateX() Methode dreht sich ein Element um seine X-Achse zu einem bestimmten Grad:
Beispiel
div
{
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
Versuch es selber " Die rotateY() Methode
Die rotateY() Methode dreht sich ein Element um seine Y-Achse zu einem bestimmten Grad:
Beispiel
div
{
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}
Versuch es selber " Die rotateZ() Methode
Die rotateZ() Methode dreht sich ein Element um seine Z-Achse zu einem bestimmten Grad:
Beispiel
div
{
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}
Versuch es selber " Testen Sie sich mit Übungen!
CSS3 Transform Properties
Die folgende Tabelle listet alle 3D-Transformationseigenschaften:
| Eigentum | Beschreibung |
|---|---|
| transform | Wendet eine 2D- oder 3D-Transformation auf ein Element |
| transform-origin | Hier können Sie die Position auf transformierten Elemente zu ändern |
| transform-style | Gibt an, wie verschachtelte Elemente werden im 3D-Raum wiedergegeben |
| perspective | Gibt die Perspektive auf, wie 3D-Elemente betrachtet werden |
| perspective-origin | Gibt die untere Position von 3D-Elementen |
| backface-visibility | Definiert, ob ein Element sichtbar sein sollen, wenn sie nicht den Bildschirm nach |
3D-Transformationsmethoden
| Funktion | Beschreibung |
|---|---|
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Definiert eine 3D-Transformation, eine 4x4-Matrix von 16 Werten |
| translate3d(x,y,z) | Definiert eine 3D-Übersetzung |
| translateX(x) | Definiert eine 3D-Übersetzung, mit nur den Wert für die X-Achse |
| translateY(y) | Definiert eine 3D-Übersetzung, mit nur den Wert für die Y-Achse |
| translateZ(z) | Definiert eine 3D-Übersetzung, mit nur den Wert für die Z-Achse |
| scale3d(x,y,z) | Definiert eine 3D-Skalierungstransformation |
| scaleX(x) | Definiert eine 3D-Skalierungstransformation durch einen Wert für die X-Achse geben |
| scaleY(y) | Definiert eine 3D-Skalierungstransformation durch einen Wert für die Y-Achse geben |
| scaleZ(z) | Definiert eine 3D-Skalierungstransformation durch einen Wert für die Z-Achse geben |
| rotate3d(x,y,z,angle) | Definiert eine 3D-Rotation |
| rotateX(angle) | Definiert eine 3D-Rotation entlang der X-Achse |
| rotateY(angle) | Definiert eine 3D-Rotation entlang der Y-Achse |
| rotateZ(angle) | Definiert eine 3D-Rotation entlang der Z-Achse |
| perspective(n) | Definiert eine perspektivische Ansicht für ein 3D-transformierte Element |