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 anzugeben. Dies passt besser zu typischen Benutzeroberflächen und erspart es Ihnen, sich die genaue Reihenfolge der in der transform-Eigenschaft anzugebenden Transformationsfunktionen zu merken.

Probieren Sie es aus

rotate: none; 
rotate: -45deg; 
rotate: z 45deg; 
rotate: x 45deg; 
rotate: y 45deg; 
rotate: 3 0.5 2 45deg; 
<section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </section> 
#default-example { background: linear-gradient(skyblue, khaki); perspective: 550px; } #example-element { width: 100px; height: 100px; transform-style: preserve-3d; } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: white; } .front { background: rgb(90 90 90 / 0.7); transform: translateZ(50px); } .back { background: rgb(0 210 0 / 0.7); transform: rotateY(180deg) translateZ(50px); } .right { background: rgb(210 0 0 / 0.7); transform: rotateY(90deg) translateZ(50px); } .left { background: rgb(0 0 210 / 0.7); transform: rotateY(-90deg) translateZ(50px); } .top { background: rgb(210 210 0 / 0.7); transform: rotateX(90deg) translateZ(50px); } .bottom { background: rgb(210 0 210 / 0.7); transform: rotateX(-90deg) translateZ(50px); }

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 Winkel angibt, um den das betroffene Element um die Z-Achse gedreht werden soll. Entspricht einer rotate() (2D-Drehung) Funktion.

x, y oder z Achsennamen 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-Drehung) Funktion.

Vektor plus Winkelwert

Drei <number>s, die einen ursprungzentrierten 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-Drehung) Funktion.

none

Gibt an, dass keine Drehung angewendet werden soll.

Formale Definition

Anfangswertnone
Anwendbar auftransformierbare Elemente
VererbtNein
Berechneter Wertwie angegeben
AnimationstypTransformation
Erstellt StapelkontextJa

Formale Syntax

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

Beispiele

Drehen eines Elements bei Hover

Das folgende Beispiel zeigt, wie die rotate-Eigenschaft verwendet wird, um ein Element entlang verschiedener Achsen bei Hover zu drehen. Die erste Box dreht sich bei Hover um 90 Grad auf der Z-Achse, die zweite dreht sich bei Hover um 180 Grad auf der Y-Achse, und die dritte dreht sich bei Hover um 360 Grad 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

Siehe auch

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