transform:
Beschreibung:
- Elemente in ihrer Form und Position verändern
Methoden:
-
translate(): Elemente horizontal und vertikal
verschieben
- 1. Wert: horizontale Verschiebung
- 2. Wert: vertikale Verschiebung
- Einheit: Pixel („px“) -
rotate(): Elemente im oder gegen den Uhrzeigersinn
drehen
- Positive Werte: im Uhrzeigersinn
- Negative Werte: gegen den Uhrzeigensinn
- Einheit: Grad („deg“) -
scale(): Elemente in ihren
Abmessungen vergrößern oder verkleinern
- 1. Wert: verändern der Breite
- 2. Wert: verändern der Höhe
- Wert gibt Verhältnis zur Originalgröße an (1 = 100%)
- Keine Einheit -
skew(): Elemente in X- und/oder
Y-Richtung verdrehen
- 1. Wert: in X-Richtung
- 2. Wert: in Y-Richtung
- Einheit: Grad („deg“) -
matrix(): Kombination der
Methoden „scale()“, „skew()“ und „transform()“
- 1. Wert: scaleX
- 2. Wert: skewY
- 3. Wert: skewX
- 4. Wert: scaleY
- 5. Wert: translateX
- 6. Wert: translateY
- Alle Werte ohne Einheit -
rotateX(): Elemente entlang der
X-Achse dreidimensional rotieren
- Einheit: Grad („deg“) -
rotateY(): Elemente entlang der
Y-Achse dreidimensional rotieren
- Einheit: Grad („deg“) -
rotateZ(): Elemente entlang der
Z-Achse dreidimensional rotieren
- Einheit: Grad („deg“) -
rotate3d(): Kombination der
Methoden „rotateX()“, „rotateY()“ und „rotateZ()“
- 1. Wert: Anteil am Winkel für rotateX()
- 2. Wert: Anteil am Winkel für rotateY()
- 3. Wert: Anteil am Winkel für rotateZ()
- 4. Wert: Winkle (Einheit Grad („deg“))
Beispiele:
![](https://image.jimcdn.com/app/cms/image/transf/dimension=614x10000:format=png/path/s834d64c225dfb243/image/i5e0cb78e2bc9e36f/version/1497382856/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/dimension=613x10000:format=png/path/s834d64c225dfb243/image/id6cd09abf7473bb6/version/1497382868/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/dimension=613x10000:format=png/path/s834d64c225dfb243/image/i009e5e8f8f71ae29/version/1497382882/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i48b480001e5a33df/version/1497382918/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i239ee075b34bbf32/version/1497382934/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/idec3c6e0b161fb7e/version/1497382951/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/icecbab95ef1455a3/version/1497382979/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i0d7be958018d0c95/version/1497382997/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i18ca45f42dd6b597/version/1497383011/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/ia00eb8c79b35400a/version/1497383032/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/ib8ae78b2927caf52/version/1497383050/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/dimension=618x10000:format=png/path/s834d64c225dfb243/image/i35b7944cebbd6a1d/version/1497383662/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i5f44bd11043d5e2b/version/1497383694/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i5e3b800d8f5d2ad1/version/1497383709/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/ic972f317a85b71dd/version/1497383767/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/idc4480910510a533/version/1497383939/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/iac2a0f9be6daeb7a/version/1497383953/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i90a2dff80710aaac/version/1497383967/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/icbe7e044ddd0f87e/version/1497384041/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i6f011d069040e017/version/1497384227/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/ie86948086b3b0608/version/1497384251/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i2586fc0f8e7e816f/version/1497384299/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/ibc81dfeb95b34147/version/1497384316/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i7eedf28c8f62ea63/version/1497384334/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i42ad9229c8078739/version/1497384366/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i2e1d3b1807d9658d/version/1497384395/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i438408a8c7df4289/version/1497384410/image.png)