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 in einer festen Position auf der 2D-Ebene dreht, ohne es zu verformen. Ihr 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 das Element rotiert — wie oben erwähnt — ist auch als Transformationsursprung bekannt. Standardmäßig ist das die Mitte des Elements, aber Sie können Ihren eigenen benutzerdefinierten Transformationsursprung mit der transform-origin Eigenschaft festlegen.

Syntax

css
rotate(a)

Werte

a

Ist ein <angle> der den Winkel der Rotation repräsentiert. Die Drehrichtung hängt von der Schreibrichtung ab. In einem von links nach rechts Kontext bezeichnet ein positiver Winkel eine Drehung im Uhrzeigersinn, ein negativer Winkel eine Drehung gegen den Uhrzeigersinn. In einem von rechts nach links Kontext bezeichnet 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
(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 Drehung mit einer anderen Transformation

Wenn Sie mehrere Transformationen auf ein Element anwenden möchten, achten Sie darauf, in welcher Reihenfolge Sie Ihre Transformationen angeben. Wenn Sie zum Beispiel vor der Translation rotieren, erfolgt die Translation entlang der neuen Rotationsachse!

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

Siehe auch