`rotate()` CSS-Funktion

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die rotate() CSS Funktion definiert eine Transformation, die ein Element auf der 2D-Ebene um einen festen Punkt dreht, ohne es zu verformen. Das Ergebnis ist ein <transform-function> Datentyp.

Probieren Sie es aus

transform: rotate(0);

transform: rotate(90deg);

transform: rotate(-0.25turn);

transform: rotate(3.142rad);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Der feste Punkt, um den sich das Element dreht — wie oben erwähnt — wird auch als transform origin bezeichnet. Dieser ist standardmäßig das Zentrum des Elements, aber Sie können Ihren eigenen benutzerdefinierten Ursprung mit der transform-origin Eigenschaft festlegen.

Hinweis: Das SVG-Attribut transform hat seine eigene Grammatik, in der rotate() zwei zusätzliche optionale Werte akzeptiert, die das Rotationszentrum angeben, wie in rotate(45, 50, 50). Diese Form ist nur im Attribut gültig, nicht in CSS: Die CSS rotate()-Funktion nimmt nur einen Winkel an und das Zentrum wird mit transform-origin festgelegt.

Syntax

css

rotate(a)

Werte

a: Ist ein <angle> der den Winkel der Drehung darstellt. Die Drehrichtung hängt von der Schreibrichtung ab. In einem von links nach rechts gerichteten Kontext bedeutet ein positiver Winkel eine Drehung im Uhrzeigersinn, ein negativer Winkel eine Drehung gegen den Uhrzeigersinn. In einem von rechts nach links gerichteten Kontext bedeutet ein positiver Winkel eine Drehung gegen den Uhrzeigersinn, ein negativer Winkel eine Drehung im Uhrzeigersinn. Eine Drehung um 180° wird als Punktspiegelung bezeichnet.

Kartesische Koordinaten auf ℝ^2	Homogene Koordinaten auf ℝℙ^2	Kartesische Koordinaten auf ℝ^3	Homogene Koordinaten auf ℝℙ^3
$\left( \begin{array}{cc} \cos(a) & -\sin(a) \\ \sin(a) & \cos(a) \end{array} \right)$	$\left( \begin{array}{ccc} \cos(a) & -\sin(a) & 0 \\ \sin(a) & \cos(a) & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} \cos(a) & -\sin(a) & 0 \\ \sin(a) & \cos(a) & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{cccc} \cos(a) & -\sin(a) & 0 & 0 \\ \sin(a) & \cos(a) & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \\ \end{array} \right)$
	`[cos(a) sin(a) -sin(a) cos(a) 0 0]`

Formale Syntax

<rotate()> = 
  rotate( [ <angle> | <zero> ] )

Beispiele

Einfaches Beispiel

HTML

html

<div>Normal</div>
<div class="rotated">Rotated</div>

CSS

css

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
  background-color: pink;
}

Ergebnis

Kombination von Drehung mit einer anderen Transformation

Wenn Sie mehrere Transformationen auf ein Element anwenden möchten, sollten Sie auf die Reihenfolge achten, in der Sie Ihre Transformationen anwenden. Zum Beispiel, wenn Sie vor dem Übersetzen drehen, wird die Übersetzung entlang der neuen Drehachse erfolgen!

HTML

html

<div>Normal</div>
<div class="rotate">Rotated</div>
<div class="rotate-translate">Rotated + Translated</div>
<div class="translate-rotate">Translated + Rotated</div>

CSS

css

div {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 100px;
  height: 100px;
  background-color: lightgray;
}

.rotate {
  background-color: transparent;
  outline: 2px dashed;
  transform: rotate(45deg);
}

.rotate-translate {
  background-color: pink;
  transform: rotate(45deg) translateX(180px);
}

.translate-rotate {
  background-color: gold;
  transform: translateX(180px) rotate(45deg);
}