rotateZ() CSS-Funktion
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die rotateZ() CSS Funktion definiert eine Transformation, die ein Element um die z-Achse dreht, 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 gleichbedeutend mit
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, beeinflusst das Ergebnis.
Syntax
rotateZ(a)
Werte
a-
Ist ein
<angle>und steht für den Winkel der Rotation. Ein positiver Winkel kann eine Drehung im Uhrzeigersinn anzeigen, ein negativer Winkel eine Drehung 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 in 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
| Spezifikation |
|---|
| CSS Transforms Module Level 2 # funcdef-rotatez |
Browser-Kompatibilität
Siehe auch
transformEigenschaftrotateEigenschaft<transform-function>