CSS3 transformEigenschaft
Beispiel
div-Elemente drehen:
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari und Chrome */
}
Selbst ausprobieren »
Browser-Unterstützung
Die Zahl in der Tabelle gibt die erste Browserversion an, die diese Eigenschaft unterstützt.
Die Zahl unmittelbar vor -webkit-, -ms- oder -moz- ist die erste Browserversion, die die mit Präfix versehene Eigenschaft unterstützt.
| Eigenschaft | |||||
|---|---|---|---|---|---|
| transform (2D) | 36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
9.0 3.2 -webkit- |
23.0 15.0 -webkit- 10.5 -o- |
| transform (3D) | 36.0 12.0 -webkit- |
12.0 | 10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
Eigenschaftsdefinition und Verwendungshinweise
Die Transform-Eigenschaft wird verwendet, um 2D- oder 3D-Transformationen auf ein Element anzuwenden. Mit dieser Eigenschaft können Elemente gedreht, skaliert, verschoben, verzerrt usw. werden.
Um die Transform-Eigenschaft besser zu verstehen, sehen Sie sich bitte.
| Standardwert: | none |
|---|---|
| Vererbt: | nein |
| Version: | CSS3 |
| JavaScript-Syntax: | object.style.transform="rotate(7deg)" |
Syntax
transform: none|Transformationsfunktionen;
| Wert | Beschreibung |
|---|---|
| none | Keine Transformation definieren. |
| matrix(n,n,n,n,n,n) | Definiert eine 2D-Transformation unter Verwendung einer Matrix mit sechs Werten. |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Definiert eine 3D-Transformation unter Verwendung einer 4x4-Matrix mit 16 Werten. |
| translate(x,y) | 2D-Transformation definieren. |
| translate3d(x,y,z) | 3D-Transformation definieren. |
| translateX(x) | Definiert eine Transformation, wobei nur der Wert für die X-Achse verwendet wird. |
| translateY(y) | Definiert eine Transformation, wobei nur der Wert für die Y-Achse verwendet wird. |
| translateZ(z) | Definiert eine 3D-Transformation, wobei nur der Wert für die Z-Achse verwendet wird. |
| scale(x[,y]?) | 2D-Skalierungstransformation definieren. |
| scale3d(x,y,z) | 3D-Skalierungstransformation definieren. |
| scaleX(x) | Definiert eine Skalierungstransformation, indem ein Wert für die X-Achse festgelegt wird. |
| scaleY(y) | Definiert eine Skalierungstransformation, indem ein Wert für die Y-Achse festgelegt wird. |
| scaleZ(z) | Definiert eine 3D-Skalierungstransformation, indem ein Wert für die Z-Achse festgelegt wird. |
| rotate(angle) | Definiert eine 2D-Rotation, wobei der Winkel im Parameter angegeben wird. |
| 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. |
| skew(x-angle,y-angle) | Definiert eine 2D-Scherungstransformation entlang der X- und Y-Achsen. |
| skewX(angle) | Definiert eine 2D-Scherungstransformation entlang der X-Achse. |
| skewY(angle) | Definiert eine 2D-Scherungstransformation entlang der Y-Achse. |
| perspective(n) | Definiert eine perspektivische Ansicht für 3D-transformierte Elemente. |
Weitere Beispiele
Dieses Beispiel zeigt, wie man "Polaroid"-Fotos erstellt und Bilder dreht.
CSS3 Transform: Verschiedene Verformungen und Drehungen
Weitere Erweiterungen