Funktion rotate

Die Funktion rotate() bewirkt eine Drehung eines Elements um einen bestimmten Winkel. Sie wird in Verbindung mit der Eigenschaft transform verwendet. Als Wert dient ein Winkel in beliebigen Winkeleinheiten. Ein positiver Wert dreht im Uhrzeigersinn, ein negativer - gegen den Uhrzeigersinn. Die Drehung erfolgt um den Punkt, der durch die Eigenschaft transform-origin festgelegt wird.

Syntax

cssSelektor {
  transform: rotate(Winkel);
}

Beispiel

In diesem Beispiel ist das Blockelement um 30 Grad im Uhrzeigersinn gedreht:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: rotate(30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Beispiel

In diesem Beispiel ist das Blockelement um 30 Grad gegen den Uhrzeigersinn gedreht:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: rotate(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Beispiel

In diesem Beispiel dreht sich das Blockelement bei Überfahren mit der Maus um 1 Umdrehung, da der Drehwert in 1turn angegeben ist (den gleichen Effekt erzielt man, wenn der Drehwinkel mit 360deg angegeben wird). Für eine flüssige Drehung wurde die Eigenschaft transition hinzugefügt:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotate(1turn);
}

Результат:

Siehe auch