CSS Schnellstart – Transform
Dieses Thema ist zwar ein fortgeschrittenes Thema, aber es soll dir nicht vorenthalten sein, was man alles mit CSS mittlerweile machen kann.
Es geht um die transform-Eigenschaft welche 2D und 3D Änderungen auf deinen Elementen durchführen kann. Von der Positionierung, bis hin zur Drehung und Skalierung ist vieles möglich.
Folgendes Beispiel wird dein Element um 90 Grad drehen:
transform: rotate(90deg);
Folgende Funktionen kannst
| Name | Beschreibung | Beispiel |
| translate() | Verschieben um x und y | transform: translate(150px, 200px); |
| rotate() | Rotieren | transform: rotate(180deg); |
| scaleX() | Auf der X-Achse skalieren | transform: scaleX(2); |
| scaleY() | Auf der Y-Achse skalieren | transform: scaleY(0.5); |
| scale() | Auf der X- und Y-Achse skalieren | transform: scale(0.5, 2); |
| skewX() | Auf der X-Achse verzerren | transform: skewX(45deg); |
| skewY() | Auf der Y-Achse verzerren | transform: skewY(45deg); |
| skew() | Auf der X- und Y-Achse verzerren | transform: skew(45deg, 45deg); |
| matrix() | Kombiniert alle 6 Transformationen | transform: matrix(0, 0.4, 1, 1, 0, 0); |
du verwenden um deine Elemente zu transformieren: