rotate
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2022.
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
/* 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 einerrotate()
(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
oderz
), plus ein<angle>
, der den Drehwinkel des Elements angibt. Entspricht einerrotateX()
/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 einerrotate3d()
(3D-Rotation) Funktion. none
-
Gibt an, dass keine Rotation angewendet werden soll.
Formale Definition
Anfangswert | none |
---|---|
Anwendbar auf | transformierbare Elemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | Transformation |
Erstellt Stapelkontext | Ja |
Formale Syntax
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
<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
.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