CSS transform Eigenschaft
- Vorherige Seite oben
- Nächste Seite transform-origin
Definition und Verwendung
Das transform-Attribut wendet 2D- oder 3D-Transformationen auf das Element an. Dieses Attribut ermöglicht es uns, das Element zu drehen, zu skalieren, zu bewegen oder zu neigen.
Um das transform-Attribut besser zu verstehen, betrachten Sie diesesDemonstration.
Siehe auch:
CSS3-Tutorial:CSS3 2D Transformation
CSS3-Tutorial:CSS3 3D Transformation
HTML DOM Referenzhandbuch:transform-Attribut
Beispiel
Drehen Sie das div-Element:
div
{
transform:rotate(7deg);
}
Am unteren Ende der Seite gibt es mehr Beispiele.
CSS-Syntax
transform: none|transform-functions;
Attributwert
| Wert | Beschreibung | Test |
|---|---|---|
| keine | Definieren Sie die Transformation, die keine Änderung vornimmt. | Test |
| matrix(n,n,n,n,n,n) | Definieren Sie die 2D-Transformation mithilfe einer Matrix mit sechs Werten. | Test |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Definieren Sie die 3D-Transformation mithilfe einer 4x4-Matrix mit 16 Werten. | |
| translate(x,y) | Definiert eine 2D-Transformation. | Test |
| translate3d(x,y,z) | Definiert eine 3D-Transformation. | |
| translateX(x) | Definiert eine Transformation, wobei nur der Wert der X-Achse verwendet wird. | Test |
| translateY(y) | Definiert eine Transformation, wobei nur der Wert der Y-Achse verwendet wird. | Test |
| translateZ(z) | Definiert eine 3D-Transformation, wobei nur der Wert der Z-Achse verwendet wird. | |
| scale(x,y) | Definiert eine 2D-Skalierungsumwandlung. | Test |
| scale3d(x,y,z) | Definiert eine 3D-Skalierungsumwandlung. | |
| scaleX(x) | Definiert eine Skalierungsumwandlung durch die Einstellung des Werts der X-Achse. | Test |
| scaleY(y) | Definiert eine Skalierungsumwandlung durch die Einstellung des Werts der Y-Achse. | Test |
| scaleZ(z) | Definiert eine 3D-Skalierungsumwandlung durch die Einstellung des Werts der Z-Achse. | |
| rotate(Winkel) | Definiert eine 2D-Drehung, wobei der Winkel in den Parametern angegeben wird. | Test |
| rotate3d(x,y,z,Winkel) | Definiert eine 3D-Drehung. | |
| rotateX(Winkel) | Definiert eine 3D-Drehung entlang der X-Achse. | Test |
| rotateY(Winkel) | Definiert eine 3D-Drehung entlang der Y-Achse. | Test |
| rotateZ(Winkel) | Definiert eine 3D-Drehung entlang der Z-Achse. | Test |
| skew(x-Winkel,y-Winkel) | Definiert eine 2D-Schwenkumwandlung entlang der X- und Y-Achse. | Test |
| skewX(Winkel) | Definiert eine 2D-Schwenkumwandlung entlang der X-Achse. | Test |
| skewY(Winkel) | Definiert eine 2D-Schwenkumwandlung entlang der Y-Achse. | Test |
| perspective(n) | Definiert die Perspektivansicht für 3D-Transformationselemente. | Test |
Technische Details
| Standardwert: | keine |
|---|---|
| Vererbbarkeit: | nein |
| Version: | CSS3 |
| JavaScript-Syntax: | object.style.transform="rotate(7deg)" |
Mehr Beispiele
- Das Bild, das auf den Tisch geworfen wird
- Dieses Beispiel zeigt, wie man ein 'Polaroid'-Bild erstellt und das Bild dreht.
Browserunterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Zahlen mit -webkit-, -moz- oder -ms- Präfixen stellen die erste Version dar, die den Präfix verwendet.
| Eigenschaft | Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| 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 | 9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
- Vorherige Seite oben
- Nächste Seite transform-origin
