## Transform

In CSS sind transforms eine Reihe von Modifikationen an ein HTML-Element.

Diese Modifikationen beinhalten hauptsächlich Skalierung, "Translation", Rotation und Skewing

Die einzelnen Anwendungen werden durch CSS-Funktionen auf dem `transform`-CSS-Style beschrieben

Es können mehrere transforms auf ein Element angewandt werden.

### translate

Mit `translate` kann das Element im Viewport verschoben werden ohne die Bounding-Box des Parents zu modifizieren.

Das heißt wir haben die Möglichkeit ein Element außerhalb des Parents zu "verschieben" ohne das "umliegende" Elemente beeinflusst werden.

Wir testen heute mit einem 3x3 Grid. In der Mitte ein Bild

Nun verschieben wir das Bild mittels `transform: translate()`

          .translate {
            transform: translate(300px, 300px);
          }

Es gibt zudem Funktionen für einzelne Richtung: `translateX, translateY, translateZ`.

Moment. `translateZ`? Ja, mit CSS kann man mittlerweile auch in einem 3-Dimensionalem Space rendern. Aber wir werden uns dieses Themengebiet nicht näher ansehen.

### scale

Mithilfe von `scale`, können wir angezeigte Inhalte skalieren. Effektiv können wir hiermit also Inhalte vergrößern oder verkleinern.

Wenn der CSS-Funktion `scale` nur ein Wert übergeben wird, so wird das Element entsprechend seines Seitenverhältnisses skaliert.

          .scale-up {
            transform: scale(1.5);
          }
          .scale-down {
            transform: scale(0.7);
          }

Wenn wir skalieren, dann ist der Wert "1" der Ausgangszustand.

Werte zwischen 0 und 1 verkleinern das Bild.

Werte über 1 vergrößern das Bild.

.scale-up
.scale-down

### rotate

Wir der Name vielleicht schon erahnen lässt, dient `rotate` dazu, ein Element zu drehen.

          .rotate {
            transform: rotate(90deg);
            /* Man kann auch die Einheit "turn" verwenden
              (halbe Umdrehung im Uhrzeigersinn) */
            /* transform: rotate(0.5turn) */
          }

.rotate

### skew

Mit `skew` verzerren wir Inhalt indem auf die X oder Y-Achse eine rotation erzeugt wird.

          .skew {
            transform: skew(30deg, 15deg);
          }

.skew

Ein letztes Wort zu `transform`: Die Reihenfolge ist wichtig!

          .rotate-and-translate {
            transform: rotate(45deg) translateX(400px);
            border: red 8px solid;
          }
          .translate-and-rotate {
            transform: translateX(400px) rotate(45deg);
            border: blue 8px solid;
          }