Mit CSS Transformationen können Sie Elemente auf Ihrer Webseite skalieren, rotieren, kippen, bewegen und sogar in 3D manipulieren. Es gibt zwei Arten von CSS Transformationen: 2D und 3D.
Zunächst müssen Sie die CSS-Eigenschaft `transform` verwenden, um eine Transformation anzugeben.
1. Skalieren: Mit `scale()` können Sie die Größe eines Elements ändern.
Beispiel:
```css
div {
transform: scale(1.5);
}
```
Dieses Beispiel skaliert das div-Element auf 150% seiner ursprünglichen Größe.
2. Rotieren: Mit `rotate()` können Sie ein Element um einen gegebenen Grad drehen.
Beispiel:
```css
div {
transform: rotate(45deg);
}
```
Dieses Beispiel dreht das div-Element um 45 Grad im Uhrzeigersinn.
3. Kippen: Mit `skew()` können Sie ein Element in Richtung X und Y kippen.
Beispiel:
```css
div {
transform: skew(30deg, 20deg);
}
```
Dieses Beispiel kippt das div-Element um 30 Grad entlang der X-Achse und um 20 Grad entlang der Y-Achse.
4. Bewegen: Mit `translate()` können Sie ein Element von seiner aktuellen Position verschieben.
Beispiel:
```css
div {
transform: translate(50px, 100px);
}
```
Dieses Beispiel verschiebt das div-Element 50 Pixel nach rechts und 100 Pixel nach unten.
5. 3D Transformationen: CSS bietet auch Funktionen für 3D-Transformationen wie `rotate3d()`, `translate3d()`, `scale3d()` und `perspective()`.
Bevor Sie 3D-Transformationen nutzen können, müssen Sie die Perspektive für das Element festlegen. Das erreichen Sie mit der `perspective`-Eigenschaft.
Beispiel:
```css
div {
perspective: 500px;
transform: rotate3d(1, 1, 0, 45deg);
}
```
6. Mehrere Transformationen : Sie können mehrere Transformationen kombinieren, indem Sie sie durch Leerzeichen trennen.
Beispiel:
```css
div {
transform: rotate(45deg) scale(1.5) translate(50px, 100px);
}
```
