CSS/Funktionen/rotate()

Browserunterstützung
caniuse.com

Die CSS-Funktion rotate() 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>

anwendbar auf

• HTML-Blockelemente, mit Ausnahme von nicht ersetzten Inline-Elementen
• SVG-Elemente

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

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

Siehe auch

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

Weblinks

• CSSWG: The Transform Functions CSS Transforms Module Level 2
  • 2D Transform Functions CSS Transforms Module Level 1
• MDN: rotate()
• Browser-Support: caniuse.com