CSS3 3D-Transformation
3D-Transformation
CSS3 ermöglicht es Ihnen, 3D-Transformationen zu verwenden, um Elemente zu formatieren.
In diesem Kapitel lernen Sie einige dieser 3D-Transformationsmethoden kennen:
- rotateX()
- rotateY()
Klicken Sie auf die Elemente unten, um den Unterschied zwischen 2D-Transformationen und 3D-Transformationen zu sehen:
2D-Drehung
3D-Drehung
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Zahlen, auf die -webkit-, -ms- oder -moz- folgen, geben die erste Browserversion an, die mit der präfixierten Eigenschaft funktionierte.
| Eigenschaft | |||||
|---|---|---|---|---|---|
| transform | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-origin (Drei-Werte-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- |
rotateX()-Methode
Die rotateX()-Methode dreht ein Element um einen gegebenen Grad um seine X-Achse.
Beispiel
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /*Safari und Chrome*/
}
Selbst ausprobieren »
rotateY()-Methode
Die rotateY()-Methode dreht ein Element um einen gegebenen Grad um seine Y-Achse.
Beispiel
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /*Safari und Chrome*/
}
Selbst ausprobieren »
Transform-Eigenschaften
Die folgende Tabelle listet alle Transform-Eigenschaften auf:
| Eigenschaft | Beschreibung | CSS |
|---|---|---|
| transform | Wendet eine 2D- oder 3D-Transformation auf ein Element an. | 3 |
| transform-origin | Ermöglicht es Ihnen, die Position des transformierten Elements zu ändern. | 3 |
| transform-style | Gibt an, wie verschachtelte Elemente im 3D-Raum angezeigt werden. | 3 |
| perspective | Gibt den Perspektiveffekt für 3D-Elemente an. | 3 |
| perspective-origin | Gibt die untere Position eines 3D-Elements an. | 3 |
| backface-visibility | Definiert, ob ein Element sichtbar ist, wenn es nicht dem Bildschirm zugewandt ist. | 3 |
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 mithilfe einer 4x4-Matrix mit 16 Werten. |
| translate3d(x,y,z) | Definiert 3D-Transformationen. |
| translateX(x) | Definiert eine 3D-Transformation nur mit Werten für die X-Achse. |
| translateY(y) | Definiert eine 3D-Transformation nur mit Werten für die Y-Achse. |
| translateZ(z) | Definiert eine 3D-Transformation nur mit Werten für die Z-Achse. |
| scale3d(x,y,z) | Definiert 3D-Skalierungstransformationen. |
| scaleX(x) | Definiert eine 3D-Skalierungstransformation durch Angabe eines Werts für die X-Achse. |
| scaleY(y) | Definiert eine 3D-Skalierungstransformation durch Angabe eines Werts für die Y-Achse. |
| scaleZ(z) | Definiert eine 3D-Skalierungstransformation durch Angabe eines Werts für die Z-Achse. |
| 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 die perspektivische Ansicht eines 3D-transformierten Elements. |