rotate()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 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 <transform-function> Datentyp.

Probieren Sie es aus

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

Syntax

Der durch rotate() erzeugte Rotationsbetrag wird durch einen <angle> angegeben. Ist dieser positiv, erfolgt die Bewegung im Uhrzeigersinn; ist sie negativ, gegen den Uhrzeigersinn. Eine Drehung um 180° wird als Punktspiegelung bezeichnet.

css
rotate(a)

Werte

a

Ist ein <angle> und repräsentiert den Winkel der Drehung. Die Drehrichtung hängt von der Schreibrichtung ab. In einem Kontext von links nach rechts bedeutet ein positiver Winkel eine Drehung im Uhrzeigersinn, ein negativer Winkel eine Drehung gegen den Uhrzeigersinn. In einem Kontext von rechts nach links 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
(cos(a)-sin(a)sin(a)cos(a))\left( \begin{array}{cc} \cos(a) & -\sin(a) \\ \sin(a) & \cos(a) \end{array} \right)
(cos(a)-sin(a)0sin(a)cos(a)0001)\left( \begin{array}{ccc} \cos(a) & -\sin(a) & 0 \\ \sin(a) & \cos(a) & 0 \\ 0 & 0 & 1 \end{array} \right)
(cos(a)-sin(a)0sin(a)cos(a)0001)\left( \begin{array}{ccc} \cos(a) & -\sin(a) & 0 \\ \sin(a) & \cos(a) & 0 \\ 0 & 0 & 1 \end{array} \right)
(cos(a)-sin(a)00sin(a)cos(a)0000100001)\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 Rotation mit einer anderen Transformation

Wenn Sie mehrere Transformationen auf ein Element anwenden möchten, sollten Sie darauf achten, in welcher Reihenfolge Sie Ihre Transformationen angeben. Zum Beispiel, wenn Sie vor der Translation rotieren, wird die Translation entlang der neuen Rotationsachse 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);
}

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
rotate()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch