Rotieren
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:
index.html
index.css
Beispiel 2
In diesem Beispiel untersuchen wir die Rotation um die z-Achse, x-Achse und y-Achse:
index.html
index.css
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.04
Rotieren
Swipe um das Menü anzuzeigen
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:
index.html
index.css
Beispiel 2
In diesem Beispiel untersuchen wir die Rotation um die z-Achse, x-Achse und y-Achse:
index.html
index.css
Danke für Ihr Feedback!