css mit Adi Prinz

Elemente mit transform verändern

Mit der CSS-Eigenschaft transform können Elemente verschoben, vergrößert, verkleinert, gedreht oder geneigt werden. Die Veränderung erfolgt im zweidimensionalen Koordinatensystem entlang der x-Achse und der y-Achse.

• Die x-Achse verläuft waagrecht von links nach rechts.
• Die y-Achse verläuft senkrecht von oben nach unten.

Grundlegende Schreibweise

selektor {
  transform: transformierungsfunktion(wert);
}
    

Ein einfaches Beispiel:

.element {
  transform: translateX(50px);
}
    

Das Element wird dabei optisch um 50px nach rechts verschoben. Sein ursprünglicher Platz im Layout bleibt jedoch erhalten.

Wichtige 2D-Transformationsfunktionen

Verschieben entlang der x- und y-Achse

Die Funktion translate() verschiebt ein Element von seiner ursprünglichen Position. Dabei können Werte für die x-Achse und die y-Achse angegeben werden.

transform: translate(x, y);
    

• Der erste Wert bestimmt die Verschiebung entlang der x-Achse.
• Der zweite Wert bestimmt die Verschiebung entlang der y-Achse.
• Positive x-Werte verschieben das Element nach rechts, negative nach links.
• Positive y-Werte verschieben das Element nach unten, negative nach oben.

.element {
  transform: translate(40px, 20px);
}
    

In diesem Beispiel wird das Element um 40px nach rechts und um 20px nach unten verschoben.

Beispiel für translate()

.translate-xy {
  transform: translate(40px, 20px);
}
    

Verschieben entlang einer einzelnen Achse

Soll ein Element nur waagrecht oder nur senkrecht verschoben werden, können translateX() und translateY() verwendet werden.

.translate-x {
  transform: translateX(50px);
}
        

.translate-y {
  transform: translateY(30px);
}
        

Prozentwerte bei translate()

Bei einer Verschiebung mit Prozentwerten beziehen sich die Werte auf die Größe des transformierten Elements:

• translateX(100%) entspricht der eigenen Breite des Elements.
• translateY(100%) entspricht der eigenen Höhe des Elements.

.element {
  transform: translateX(100%);
}
    

Elemente vergrößern und verkleinern

Mit der Funktion scale() kann ein Element vergrößert oder verkleinert werden. Die Skalierung kann gemeinsam oder getrennt entlang der x- und y-Achse erfolgen.

transform: scale(x, y);
    

• Der erste Wert bestimmt die Skalierung entlang der x-Achse.
• Der zweite Wert bestimmt die Skalierung entlang der y-Achse.
• Wird nur ein Wert angegeben, gilt er für beide Achsen.

Beispiele für scale()

.scale-up {
  transform: scale(1.25);
}
        

.scale-down {
  transform: scale(0.75);
}
        

Einzelne Achsen skalieren

Mit scaleX() und scaleY() kann die Skalierung auf eine einzelne Achse beschränkt werden.

.scale-x {
  transform: scaleX(1.4);
}
        

.scale-y {
  transform: scaleY(1.4);
}
        

Elemente mit negativen Werten spiegeln

Negative Skalierungswerte kehren die Darstellung entlang der jeweiligen Achse um. Dadurch kann ein Element waagrecht oder senkrecht gespiegelt werden.

.horizontal-spiegeln {
  transform: scaleX(-1);
}

.vertikal-spiegeln {
  transform: scaleY(-1);
}
    

• scaleX(-1) spiegelt das Element waagrecht.
• scaleY(-1) spiegelt das Element senkrecht.