rotateZ()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨Juli 2015â©.
Die rotateZ() CSS Funktion definiert eine Transformation, die ein Element um die z-Achse rotiert, ohne es zu verformen. Das Ergebnis ist ein <transform-function> Datentyp.
Probieren Sie es aus
transform: rotateZ(0);
transform: rotateZ(90deg);
transform: rotateZ(-0.25turn);
transform: rotateZ(3.142rad);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
Die Rotationsachse verläuft durch einen Ursprung, der durch die CSS-Eigenschaft transform-origin definiert wird.
Hinweis:
rotateZ(a) ist äquivalent zu
rotate(a) oder
rotate3d(0, 0, 1, a).
Hinweis: Im Gegensatz zu Rotationen in der 2D-Ebene ist die Zusammensetzung von 3D-Rotationen normalerweise nicht kommutativ. Mit anderen Worten, die Reihenfolge, in der die Rotationen angewendet werden, hat Einfluss auf das Ergebnis.
Syntax
rotateZ(a)
Werte
a-
Ist ein
<angle>und repräsentiert den Winkel der Rotation. Ein positiver Winkel bezeichnet eine im Uhrzeigersinn verlaufende Rotation, ein negativer Winkel eine gegen den Uhrzeigersinn.
| Kartesische Koordinaten auf â^2 | Homogene Koordinaten auf ââ^2 | Kartesische Koordinaten auf â^3 | Homogene Koordinaten auf ââ^3 |
|---|---|---|---|
| Diese Transformation gilt für den 3D-Raum und kann nicht auf der Ebene dargestellt werden. |
|
|
|
Formale Syntax
<rotateZ()> =
rotateZ( [ <angle> | <zero> ] )
Beispiele
HTML
<div>Normal</div>
<div class="rotated">Rotated</div>
CSS
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.rotated {
transform: rotateZ(45deg);
background-color: pink;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Transforms Module Level 2 # funcdef-rotatez |
Browser-Kompatibilität
Siehe auch
transformEigenschaftrotateEigenschaft<transform-function>