Besuchen Sie unseren Adventskalender 2022!

CSS/Funktionen/rotate()

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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 Verwednung 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

Siehe auch