rotate

Baseline 2022

Newly available

Since August 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die rotate CSS Eigenschaft ermöglicht es Ihnen, Rotations-Transformationen einzeln und unabhängig von der transform Eigenschaft zu spezifizieren. Dies passt besser zu typischen Benutzeroberflächen und erspart es, sich die genaue Reihenfolge der Transformationsfunktionen zu merken, die in der transform Eigenschaft angegeben werden sollen.

Probieren Sie es aus

Syntax

css

/* Keyword values */
rotate: none;

/* Angle value */
rotate: 90deg;
rotate: 0.25turn;
rotate: 1.57rad;

/* x, y, or z axis name plus angle */
rotate: x 90deg;
rotate: y 0.25turn;
rotate: z 1.57rad;

/* Vector plus angle value */
rotate: 1 1 1 90deg;

/* Global values */
rotate: inherit;
rotate: initial;
rotate: revert;
rotate: revert-layer;
rotate: unset;

Werte

Winkelwert: Ein <angle>, der den Drehwinkel um die Z-Achse des betroffenen Elements angibt. Entspricht einer rotate() (2D-Rotation) Funktion.
Name der x-, y- oder z-Achse plus Winkelwert: Der Name der Achse, um die Sie das betroffene Element drehen möchten (x, y oder z), plus ein <angle>, der den Drehwinkel des Elements angibt. Entspricht einer rotateX()/rotateY()/rotateZ() (3D-Rotation) Funktion.
Vektor plus Winkelwert: Drei <number>, die einen ursprungszentrierten Vektor darstellen, der eine Linie definiert, um die Sie das Element drehen möchten, plus ein <angle>, der den Drehwinkel des Elements angibt. Entspricht einer rotate3d() (3D-Rotation) Funktion.
none: Gibt an, dass keine Rotation angewendet werden soll.

Formale Definition

Initialer Wert	`none`
Anwendbar auf	transformierbare Elemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Transformation
Erstellt Stapelkontext	Ja

Formale Syntax

rotate = 
  none                                    |
  <angle>                                 |
  [ x | y | z | <number>{3} ] && <angle>

Beispiele

Rotieren eines Elements beim Hover

Das folgende Beispiel zeigt, wie die rotate Eigenschaft verwendet wird, um ein Element auf verschiedene Achsen beim Hover zu rotieren. Das erste Feld rotiert beim Hover um 90 Grad auf der Z-Achse, das zweite rotiert um 180 Grad auf der Y-Achse beim Hover, und das dritte rotiert um 360 Grad beim Hover um einen durch Koordinaten definierten Vektor.

HTML

html

<div class="box" id="box1">rotate Z</div>
<div class="box" id="box2">rotate Y</div>
<div class="box" id="box3">vector & angle</div>

CSS

css

.box {
  display: inline-block;
  margin: 1em;
  min-width: 6.5em;
  line-height: 6.5em;
  text-align: center;
  transition: 1s ease-in-out;
  border: 0.25em dotted;
}

#box1:hover {
  rotate: 90deg;
}

#box2:hover {
  rotate: y 180deg;
}

#box3:hover {
  rotate: 1 2 1 360deg;
}

Ergebnis

Spezifikationen

Specification
CSS Transforms Module Level 2 # individual-transforms

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Hinweis: > skew ist kein unabhängiger transform Wert.