CSS/Funktionen/rotate()

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

Parameter	ein (positives oder negatives) Winkelmaß. Negative Werte bewirken eine Drehung gegen den Uhrzeigersinn. Bei einer Verwendung des transform-Attributs in SVG kann dies durch ein transform-origin erweitert werden: rotate(angle[ x y])
anwendbar auf	* HTML-Blockelemente, mit Ausnahme von nicht ersetzten Inline-Elementen SVG-Elemente
Browsersupport	caniuse: mdn-css_types_transform-function_rotate

Beispiel

@keyframes rotating {
  0%  { transform: rotate(0);}
  100%{ transform: rotate(1turn);}
}
.disc { 
  animation: rotating 4s linear infinite;
}

Das Element mit der Klasse disc wird durch die Animation rotating gedreht.

Beachten Sie: Transform-Funktionen benötigen

• in CSS Maßeinheiten
• in SVG dimensionslose Größen/ Zahlenwerte ohne Maßeinheiten

Weblinks

• CSSWG: The Transform Functions CSS Transforms Module Level 2
  • 2D Transform Functions CSS Transforms Module Level 1
• MDN: rotate()

Siehe auch

• Transform
  • Transform/Drehen, Kreisen und Pendeln
  • SVG-Transformationen
• CSS/Eigenschaften/rotate