Transformationen

In CSS ist es möglich, mittels der Eigenschaft transform Elemente zu transformieren. Hierzu zählt verschieben, skalieren, neigen und rotieren.

Verschieben

Um Elemente zu verschieben benötigen wir als Wert der transform-Eigenschaft das Schlüsselwort translate, welches von einem runden Klammernpaar gefolgt wird. Innerhalb der Klammer werden zwei Parameter angegeben: die X-Verschiebung und die Y-Verschiebung. Beide Parameter müssen als Zahl zusammen mit einer Einheit (außer der Wert ist 0) angegeben werden. Getrennt werden die zwei Parameter durch ein Komma.

div
{
	background-color: red;
	width: 200px;
	height: 200px;
	transform: translate(100px, 25px);
}

Skalieren

Über das Schlüsselwort scale lassen sich Elemente skalieren. Auch hier werden ein Klammernpaar und zwei Werte als Parameter benötigt. Die Parameter werden jedoch hier nicht zusammen mit einer Einheit angegeben. Es wird also nur eine Zahl angegeben, welche den Skalierungsfaktor angibt (z. B. 0.5 = 50%, 1.5 = 150%, 2.0 = 200% usw.).

Bei der Skalierung muss beachtet werden, dass das Element aus dem Mittelpunkt heraus vergrößert bzw. verkleinert wird. Geändert werden kann dies mittels der transform-origin-Eigenschaft, welche wir weiter unten beim Unterthema Rotieren genauer erklären werden.

div
{
	background-color: red;
	width: 200px;
	height: 200px;
	transform: scale(1.4, 0.8);
}

Neigen

Um ein Element zu neigen, notieren wir in der transform-Eigenschaft das Schlüsselwort skew. Als Parameter werden wieder zwei Werte in der Einheit deg (degree = Grad) angegeben. Der erste Wert bestimmt die X-Neigung und der zweite die Y-Neigung.

div
{
	background-color: red;
	width: 200px;
	height: 200px;
	transform: skew(20deg, 10deg);
}

Übrigens: Die Schlüsselwörter translate, scale und skew können um das Zeichen X oder Y erweitert werden (z. B. translateX oder scaleY). Innerhalb der Klammern wird dann lediglich ein Parameter angegeben, welcher sich auf die X- oder Y-Achse auswirkt. Eine Notation wie z. B. skew(30deg, 0) könnte dann also durch skewX(30deg) ersetzt werden.

Rotieren

Über das Schlüsselwort rotate lassen sich Elemente rotieren. Innerhalb der Klammer wird ein Wert in der deg-Einheit (Grad) angegeben. Eine Angabe wie -10deg ist erlaubt, könnte aber natürlich auch durch 350deg ersetzt werden.

Die transform-origin-Eigenschaft legt (bei der Rotation) den Drehpunkt fest. Als Wert für die transform-origin-Eigenschaft werden zwei Parameter angegeben, wovon sich der erste auf die X-Achse und der zweite auf die Y-Achse bezieht. Die Parameter können sowohl den Wert left, center oder right (für die X-Achse) und top, center oder bottom (für die Y-Achse) besitzen, als auch eine Angabe in den CSS bekannten Einheiten (Pixel, Prozent etc.). Die Eigenschaft transform-origin kann auch in Zusammenhang mit der Transformation zur Skalierung und Neigung verwendet werden. Dadurch ist es möglich, eine Transformation nicht von der Mitte aus durchzuführen, sondern von einer anderen Position.

div
{
	background-color: red;
	width: 200px;
	height: 200px;
	transform: rotate(20deg);
	transform-origin: top left;
}