CSS mit Adi Prinz

Elemente mit rotate() drehen

Elemente um einen Winkel drehen

Mit der Funktion rotate() wird ein Element in der zweidimensionalen Ebene gedreht. Die Drehung erfolgt standardmäßig um den Mittelpunkt des Elements.

transform: rotate(winkel);

Ein positiver Winkel dreht das Element im Uhrzeigersinn.
Ein negativer Winkel dreht das Element gegen den Uhrzeigersinn.
Der Drehpunkt kann später mit transform-origin verändert werden.

.element {
  transform: rotate(20deg);
}

Positive und negative Drehwinkel

Drehung im Uhrzeigersinn

rotate(20deg)

.rotate-positive {
  transform: rotate(20deg);
}

Drehung gegen den Uhrzeigersinn

rotate(-20deg)

.rotate-negative {
  transform: rotate(-20deg);
}

Der gestrichelte Rahmen zeigt wieder die ursprüngliche Position und Ausrichtung. Die Drehung verändert den belegten Platz im Dokumentfluss nicht.

Winkeleinheiten

Für Drehungen und Neigungen können in CSS verschiedene Winkeleinheiten verwendet werden.

Einheit	Bedeutung	Vollständige Drehung	Beispiel
`deg`	Grad	`360deg`	`rotate(45deg)`
`turn`	Umdrehung	`1turn`	`rotate(0.25turn)`
`rad`	Radiant beziehungsweise Bogenmaß	ungefähr `6.2832rad`	`rotate(0.7854rad)`
`grad`	Gon beziehungsweise Neugrad	`400grad`	`rotate(50grad)`

Diese Angaben bewirken jeweils eine Drehung um 90 Grad:

.element-1 {
  transform: rotate(90deg);
}

.element-2 {
  transform: rotate(0.25turn);
}

.element-3 {
  transform: rotate(1.5708rad);
}

.element-4 {
  transform: rotate(100grad);
}

In der Praxis werden meistens deg und gelegentlich turn verwendet. Die Einheit grad darf nicht mit der deutschen Bezeichnung „Grad“ verwechselt werden.

Vollständige und mehrfache Drehungen

Eine vollständige Drehung kann mit 360deg oder 1turn angegeben werden. Mehrere vollständige Drehungen werden besonders bei Animationen verwendet.

.eine-umdrehung {
  transform: rotate(1turn);
}

.zwei-umdrehungen {
  transform: rotate(2turn);
}

Ohne eine Transition oder Animation wird nur das fertige Ergebnis angezeigt. Bei rotate(1turn) sieht das Element deshalb anschließend genauso aus wie vor der Drehung.

Elemente mit skew() neigen

Elemente entlang der Achsen neigen

Mit der Funktion skew() wird ein Element entlang der x-Achse, der y-Achse oder entlang beider Achsen geneigt. Dadurch entsteht eine schräge beziehungsweise verzerrte Darstellung.

transform: skew(x-winkel, y-winkel);

Der erste Winkel bestimmt die Neigung entlang der x-Achse.
Der zweite Winkel bestimmt die Neigung entlang der y-Achse.
Wird nur ein Winkel angegeben, gilt er für die x-Achse. Die Neigung entlang der y-Achse bleibt dann 0.

.element {
  transform: skew(20deg, 10deg);
}

Beispiele für skew()

Neigung entlang beider Achsen

skew()

.skew-xy {
  transform: skew(20deg, 10deg);
}

Neigung mit negativen Winkeln

skew(-20deg)

.skew-negative {
  transform: skew(-20deg);
}

Positive und negative Winkel bestimmen die Richtung der Neigung. Der gestrichelte Rahmen zeigt die ursprüngliche Form und Position des Elements.

Neigung entlang einer einzelnen Achse

Mit skewX() und skewY() kann die Neigung auf eine einzelne Achse beschränkt werden.

skewX()

.skew-x {
  transform: skewX(20deg);
}

Die Box wird entlang der x-Achse geneigt. Die obere und untere Kante werden dabei gegeneinander verschoben.

skewY()

skewY(15deg)

.skew-y {
  transform: skewY(15deg);
}

Die Box wird entlang der y-Achse geneigt. Die linke und rechte Kante werden dabei gegeneinander verschoben.

Hinweise zur Verwendung

Eine Neigung wirkt sich auf das gesamte Element einschließlich seines Inhalts aus. Text innerhalb des Elements wird daher ebenfalls schräg dargestellt.

Große Neigungswinkel können Texte schwer lesbar machen. Verwende skew() deshalb eher sparsam für dekorative Flächen, Hintergründe oder besondere Hervorhebungen.

rotate & skew

CSS Module

css mit Adi Prinz