CSS Transform

Mit transform kannst du HTML-Elemente visuell verändern, ohne ihre Position im Dokumentenfluss zu verändern. Elemente lassen sich verschieben, drehen, skalieren oder neigen – rein visuell und ohne das Layout neu zu berechnen.

Wichtig:

  • transform ändert nicht die Position im Layout
  • Es wirkt nur visuell

Typische Einsatzgebiete:

  • Animationen & Hover-Effekte
  • Drehen von Icons
  • Zoomen von Karten
  • 3D-Effekte

Syntax

.element {
  transform: transform-funktion(wert);
}

Beispiel:

.box {
  transform: rotate(45deg);
}

Transform Beispiele

content

translate verschiebt hier das Element um 50px in beide Richtungen (X- und Y-Achse).
transform: translate(50px, 50px);

content

scale skaliert das Element um 150%. Minuswerte sind möglich.
transform: scale(1.5, 1.5)

content

scale skaliert das Element um 120%. Wenn die Skalierung minus Werte hat, wird es gespiegelt.
transform: scale(-1.2, -1.2);

content

rotate das Element wird um die Z-Achse in Uhrzeiger-Richtung gedreht. Minuswerte drehen das Element in die andere Richtung.
transform: rotate(50deg);

content

skew neigt die Fläche im angegebenen Winkel und der definierten Richtung.
transform: skew(20deg, 10deg);

content

Kombination
transform: translateX(50px) rotate(45deg) scale(1.2);

Transform-Funktionen

  • translate()Verschiebt ein Element entlang der X- und/oder Y-Achse
  • scale()Vergrössert oder verkleinert ein Element (Skalierung)
  • rotate()Dreht ein Element um die Z-Achse
  • skew()Neigt ein Element in einem bestimmten Winkel

translate() – Verschieben

Bewegt ein Element relativ zu seiner aktuellen Position.

transform: translate(x, y);

Beispiel

transform: translate(50px, 0);     /* nach rechts */
transform: translate(0, -20px);    /* nach oben */
transform: translate(50%, 100%);

Varianten

translateX(50px)
translateY(20px)
  • Werte: px | rem | em | %
  • Negative Werte: werden akzeptiert

scale() – Skalieren (vergrössern / verkleinern)

transform: scale(1.2);   /* 120% */
transform: scale(0.8);   /* 80% */

Unterschiedliche Achsen:

transform: scaleX(1.5);
transform: scaleY(0.5);
  • Werte: Nummer | %
  • Negative Werte: sind möglich und können das Element spiegeln.
  • Skaliert auch Inhalt & Rahmen.

rotate() – Drehen

transform: rotate(45deg);
transform: rotate(-90deg);

Andere Einheiten:

rotate(0.5turn)
rotate(1rad)
  • Werte: deg | turn | rad
  • Negative Werte: sind möglich
  • Drehpunkt ist standardmässig die Mitte.

skew() – Neigen

transform: skew(20deg, 10deg);

Einzeln:

skewX(20deg)
skewY(10deg)
  • Werte: deg
  • Negative Werte: sind möglich und drehen in die andere Richtung.
  • Kann Texte schwer lesbar machen.

Transform kombinieren

Reihenfolge ist wichtig und macht einen grossen Unterschied!
Transform-Funktionen werden von rechts nach links angewendet.

transform: translateX(50px) rotate(45deg) scale(1.2);

Einzelne Transform-Eigenschaften

translate, rotate und scale lassen sich auch als eigenständige CSS-Eigenschaften schreiben. Das ist besonders praktisch, wenn eine Transformation einzeln verändert oder animiert werden soll.

.element {
  translate: 50px 20px;
  rotate: 45deg;
  scale: 1.2;
}

Dreh- & Skalierpunkt

transform-origin bestimmt den Punkt, um den ein Element rotiert oder skaliert. Standard ist die Mitte des Elements.

transform-origin: center; /* Standard */

Beispiele:

transform-origin: top left;
transform-origin: 50% 100%;
transform-origin: 0 0;

Transform & Transition

Die Eigenschaft transform bestimmt, wie das angesprochene Element transformiert werden soll. Die Eigenschaft transition ermöglicht eine lineare Transformationen von Elementen. Das perfekte Duo für Animationen, flüssig und performant Transition Lektion

.box {
  transition: transform 0.3s ease;
}

.box:hover {
  transform: scale(1.1);
}

Advanced

3D-Transforms

Werte: rotateX, rotateY, rotateZ

transform: rotateY(45deg);

perspective

.container {
  perspective: 800px;
}

Kurzschreibweise

transform: perspective(800px) rotateY(45deg);

Ohne perspective sieht 3D flach aus.

See the Pen Untitled by Intensivstation (@intensivstation) on CodePen.

Ressourcen