Verwenden von CSS-Transformationen
Durch die Modifikation des Koordinatenraums verändern CSS-Transformationen die Form und Position des betroffenen Inhalts, ohne den normalen Dokumentenfluss zu stören. Dieser Leitfaden bietet eine Einführung in die Verwendung von Transformationen.
CSS-Transformationen werden mittels einer Reihe von CSS-Eigenschaften implementiert, die affine lineare Transformationen auf HTML-Elemente anwenden lassen. Diese Transformationen umfassen Drehungen, Schrägstellungen, Skalierungen und Verschiebungen sowohl in der Ebene als auch im 3D-Raum.
Warnung:
Nur transformierbare Elemente können transformiert werden; das heißt alle Elemente, deren Layout durch das CSS Box-Modell gesteuert wird, mit Ausnahme von: nicht ersetzten Inline-Boxen, Tabellenspalten-Boxen und Tabellenspalten-Gruppen-Boxen.
CSS-Transformations-Eigenschaften
Zwei Haupteigenschaften werden zur Definition von CSS-Transformationen verwendet: transform (oder die einzelnen translate, rotate, und scale Eigenschaften) und transform-origin.
transform-origin-
Gibt die Position des Ursprungs an. Standardmäßig befindet er sich im Zentrum des Elements und kann verschoben werden. Er wird von mehreren Transformationen verwendet, wie Drehungen, Skalierungen oder Schrägstellungen, die einen spezifischen Punkt als Parameter benötigen.
transform-
Gibt die auf das Element anzuwendenden Transformationen an. Es ist eine durch Leerzeichen getrennte Liste von Transformationen, die nacheinander angewendet werden, wie es durch die Kompositionsoperation angefordert wird. Zusammengesetzte Transformationen werden effektiv von rechts nach links angewendet.
Beispiele
Hier ist ein unverändertes Bild des MDN-Logos:
Drehung
Hier ist das MDN-Logo um 90 Grad von seiner linken unteren Ecke gedreht.
<img src="logo.png" alt="MDN Logo" />