rotate()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

Probieren Sie es aus

transform: rotate(0);

transform: rotate(90deg);

transform: rotate(-0.25turn);

transform: rotate(3.142rad);

Der feste Punkt, um den das Element rotiert — wie oben erwähnt — wird auch Transformationsursprung genannt. Dieser ist standardmäßig in der Mitte des Elements, aber Sie können mit der Eigenschaft transform-origin einen eigenen Transformationsursprung festlegen.

Syntax

Der Betrag der durch rotate() erzeugten Rotation wird durch ein angegeben. Wenn positiv, erfolgt die Bewegung im Uhrzeigersinn; wenn negativ, gegen den Uhrzeigersinn. Eine Drehung um 180° wird als Punktspiegelung bezeichnet.

css

rotate(a)

Werte

a: Ist ein , der den Winkel der Rotation darstellt. Die Drehrichtung hängt von der Schreibrichtung ab. In einem von links nach rechts Kontext bedeutet ein positiver Winkel eine Drehung im Uhrzeigersinn, ein negativer Winkel eine Drehung gegen den Uhrzeigersinn. In einem von rechts nach links Kontext bedeutet ein positiver Winkel eine Drehung gegen den Uhrzeigersinn, ein negativer Winkel eine Drehung im Uhrzeigersinn.

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( [  |  ] )

Beispiele

Einfaches Beispiel

HTML

html

Normal
Rotated

CSS

css

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

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

Ergebnis

Kombinieren von Rotation mit einer anderen Transformation

Wenn Sie mehrere Transformationen auf ein Element anwenden möchten, achten Sie auf die Reihenfolge, in der Sie die Transformationen angeben. Zum Beispiel, wenn Sie zuerst drehen und dann verschieben, erfolgt die Verschiebung entlang der neuen Rotationsachse!

HTML

html

Normal
Rotated
Rotated + Translated
Translated + Rotated

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);
}

Ergebnis

Spezifikationen

Specification
CSS Transforms Module Level 1 # funcdef-transform-rotate

Browser-Kompatibilität

Siehe auch

transform Eigenschaft
rotate Eigenschaft
rotate3d()