Wir können die Funktion rotate() verwenden, um Elemente zu drehen. Positive Werte drehen das Element im Uhrzeigersinn, während negative Werte es gegen den Uhrzeigersinn drehen. Der Drehwinkel wird typischerweise in Grad (deg) angegeben, wobei der Standardwert 0deg keine Drehung anzeigt. Andere akzeptable Einheiten für Drehwinkel sind Umdrehungen (turn) und Radianten (rad).

Elementachsen

Um zu verstehen, wie die Rotation funktioniert, müssen wir das Konzept der Elementachsen verstehen. Es gibt drei Achsen:

• Die x-Achse ist horizontal und verläuft von links nach rechts;
• Die y-Achse ist vertikal und verläuft von oben nach unten;
• Die z-Achse ist senkrecht zum Bildschirm und zeigt auf den Betrachter zu.

Rotationsrichtung

Standardmäßig dreht die rotate()-Eigenschaft das Element um die z-Achse. Wir können jedoch auch eine Rotation um die x-Achse und y-Achse mit den folgenden Werten anwenden:

transform: rotateX(angle);
transform: rotateY(angle);

Beispiel 1

Betrachten Sie das folgende Beispielcode, bei dem wir verschiedene Rotationswinkel anwenden, um die Rotation um die z-Achse zu demonstrieren:

Beispiel 2

In diesem Beispiel untersuchen wir die Rotation um die z-Achse, x-Achse und y-Achse: