css mit Adi Prinz

Mehrere Funktionen in einer Deklaration

Mehrere Transformationsfunktionen können innerhalb einer transform-Eigenschaft hintereinander angegeben werden. Die einzelnen Funktionen werden durch Leerzeichen getrennt.

.element {
  transform: translateX(40px) rotate(15deg) scale(1.1);
}
    

In diesem Beispiel wird das Element verschoben, gedreht und vergrößert.

Die Reihenfolge ist wichtig

Transformationsfunktionen werden nicht unabhängig voneinander ausgeführt. Jede Funktion beeinflusst das Koordinatensystem für die folgenden Transformationen. Deshalb können dieselben Funktionen in unterschiedlicher Reihenfolge zu verschiedenen Ergebnissen führen.

.combine-first {
  transform: translateX(50px) rotate(25deg);
}
        

.combine-second {
  transform: rotate(25deg) translateX(50px);
}
        

Die transform-Eigenschaft wird vollständig ersetzt

Wird transform in einer späteren CSS-Regel erneut angegeben, ersetzt die neue Deklaration normalerweise den vorherigen Wert.

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

.element:hover {
  transform: scale(1.2);
}
    

Beim Ãœberfahren mit der Maus wird die Verschiebung nicht beibehalten. Es gilt nur noch scale(1.2).

Sollen beide Transformationen gelten, müssen beide Funktionen erneut angegeben werden:

.element:hover {
  transform: translateX(40px) scale(1.2);
}
    

Moderne einzelne Transformationseigenschaften

Für Verschiebung, Drehung und Skalierung stehen zusätzlich die einzelnen CSS-Eigenschaften translate, rotate und scale zur Verfügung.

.element {
  translate: 40px 20px;
  rotate: 15deg;
  scale: 1.1;
}
    

Diese Schreibweise kann praktisch sein, wenn einzelne Transformationen unabhängig voneinander verändert werden sollen.

Der Ausgangspunkt einer Transformation

Mit der Eigenschaft transform-origin wird festgelegt, von welchem Punkt aus eine Transformation erfolgt. Das ist besonders bei Drehungen und Skalierungen deutlich sichtbar.

Standardmäßig liegt der Transformationsursprung in der Mitte des Elements:

.element {
  transform-origin: center center;
}
    

Das entspricht:

.element {
  transform-origin: 50% 50%;
}
    

Schreibweise und Werte

transform-origin: x-position y-position;
    

Der erste Wert bestimmt die Position entlang der x-Achse, der zweite Wert die Position entlang der y-Achse.

Typische Schlüsselwortkombinationen sind:

transform-origin: center;
transform-origin: left top;
transform-origin: right bottom;
transform-origin: center bottom;
    

Drehung um unterschiedliche Ausgangspunkte

In den folgenden Beispielen werden gleich große Boxen jeweils um 25deg gedreht. Nur der Transformationsursprung unterscheidet sich.

.origin-center {
  transform-origin: center center;
  transform: rotate(25deg);
}
        

.origin-top-left {
  transform-origin: left top;
  transform: rotate(25deg);
}
        

.origin-bottom-right {
  transform-origin: right bottom;
  transform: rotate(25deg);
}
        

.origin-outside {
  transform-origin: -30px 50%;
  transform: rotate(25deg);
}
        

Praktische Einsatzmöglichkeiten

Durch einen passend gewählten Transformationsursprung lassen sich unterschiedliche Bewegungen und Effekte vorbereiten.

• Eine Tür dreht sich um ihre linke oder rechte Kante.
• Ein Zeiger dreht sich um sein unteres Ende.
• Ein Menü klappt von seiner oberen Kante aus auf.
• Eine Karte vergrößert sich aus einer bestimmten Ecke.

.tuer {
  transform-origin: left center;
  transform: rotate(-20deg);
}

.zeiger {
  transform-origin: center bottom;
  transform: rotate(45deg);
}
    

Mehrere Transformationen mit matrix() beschreiben

Die Funktion matrix() beschreibt mehrere 2D-Transformationen mithilfe von sechs Zahlenwerten. Sie kann unter anderem Skalierungen, Neigungen und Verschiebungen zusammenfassen.

transform: matrix(a, b, c, d, e, f);
    

Einfache matrix()-Beispiele

Die unveränderte Ausgangsdarstellung wird mit folgender Matrix beschrieben:

.element {
  transform: matrix(1, 0, 0, 1, 0, 0);
}
    

Die nächsten beiden Schreibweisen verschieben ein Element um 40px nach rechts und um 20px nach unten:

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

.element {
  transform: matrix(1, 0, 0, 1, 40, 20);
}
    

Auch eine einfache Skalierung kann als Matrix geschrieben werden:

.element {
  transform: scale(1.2, 0.8);
}
    

.element {
  transform: matrix(1.2, 0, 0, 0.8, 0, 0);
}
    

Zusammenfassung der 2D-Transformationen

Wichtige Hinweise

• Transformationen verändern normalerweise nicht den Platz eines Elements im Dokumentfluss.
• Mehrere Transformationsfunktionen werden innerhalb von transform durch Leerzeichen getrennt.
• Die Reihenfolge mehrerer Transformationsfunktionen beeinflusst das Ergebnis.
• Eine neue transform-Deklaration ersetzt normalerweise den vorherigen Wert vollständig.
• transform-origin bestimmt den Ausgangspunkt einer Drehung, Skalierung oder Neigung.
• Große Skalierungen, Drehungen und Neigungen können andere Inhalte optisch überdecken.
• Bewegte Transformationen sollten bei der Einstellung prefers-reduced-motion später reduziert oder deaktiviert werden.