====== LU13d - CSS Transforms ======

Transforms sind geometrische Operationen, die das Aussehen eines Elements verändern, **ohne den Dokumentfluss zu beeinflussen** – andere Elemente rücken nicht nach. Sie werden sehr häufig innerhalb von ''@keyframes'' und Transitions eingesetzt.


===== Die vier Grundoperationen =====

<WRAP center round box 80%>
<code css>
/* Verschieben: x = horizontal (positiv = rechts), y = vertikal (positiv = unten) */
transform: translate(20px, 10px);
transform: translateX(20px);     /* nur horizontal */
transform: translateY(-10px);    /* nur vertikal, nach oben */

/* Skalieren: 1 = Originalgrösse, > 1 vergrössert, < 1 verkleinert */
transform: scale(1.5);           /* gleichmässig */
transform: scale(1.2, 0.8);      /* horizontal × vertikal */

/* Rotieren: positive Werte = im Uhrzeigersinn, Einheit deg immer nötig */
transform: rotate(45deg);
transform: rotate(-15deg);       /* gegen den Uhrzeigersinn */

/* Scheren: erzeugt einen Parallelogramm-Effekt */
transform: skewX(15deg);         /* untere Kante verschoben */
transform: skewY(10deg);         /* rechte Kante verschoben */
</code>
</WRAP>


===== Mehrere Transforms kombinieren =====

Mehrere Transformationen lassen sich in einer ''transform''-Angabe kombinieren. **Die Reihenfolge beeinflusst das Ergebnis**, weil jede Transformation das Koordinatensystem für die nächste verändert:

<WRAP center round box 80%>
<code css>
/* Erst rotieren, dann verschieben:
   Die Verschiebung erfolgt im bereits rotierten Koordinatensystem */
transform: rotate(45deg) translate(50px, 0);

/* Erst verschieben, dann rotieren:
   Die Rotation erfolgt um den Ursprung, nicht um das verschobene Element */
transform: translate(50px, 0) rotate(45deg);
</code>
</WRAP>

===== transform-origin =====

Standardmässig liegt der Ursprungspunkt aller Transformationen in der **Mitte des Elements**. Mit ''transform-origin'' lässt er sich verschieben:

<WRAP center round box 80%>
<code css>
/* Rotation um die obere linke Ecke */
transform-origin: left top;

/* Rotation um die Mitte der Oberkante */
transform-origin: center 0px;

/* Rotation um einen Punkt ausserhalb des Elements */
transform-origin: 50% 150%;
</code>
</WRAP>

Der Ursprungspunkt bleibt an seiner definierten Position – er bewegt sich **nicht mit**, wenn das Element sich bewegt.


===== Transforms in Keyframe-Animationen =====

Transforms sind der häufigste Baustein in ''@keyframes'', weil der Browser sie direkt auf der Grafikkarte berechnen kann – ohne das Layout der gesamten Seite neu zu berechnen:

<WRAP center round box 80%>
<code css>
/* Beispiel: schwebendes Element */
@keyframes bewegen-rotieren {
    0%, 100% {
        transform: translateY(0) rotate(-3deg);
    }
    50% {
        transform: translateY(-12px) rotate(5deg);
    }
}

.deko-element {
    animation: bewegen-rotieren 4s ease-in-out infinite;
}
</code>
</WRAP>