Die CSS-Funktion rotate() verdreht ein Element um eine bestimmte Gradzahl. Sie können ein Element mit einer positiven Gradzahl im Uhrzeigersinn drehen. Oder Sie können ein Element mit einer negativen Zahl gegen den Uhrzeigersinn drehen.
Heute lernen wir, wie Sie Elemente mit CSS drehen. Warum sollten wir ein Element drehen? Rotierende Elemente machen Ihre Webseite interaktiver. Bei richtiger Verwendung trägt ein rotierendes Element zur Ästhetik Ihrer Website bei.
Beachten Sie beim Lesen dieses Artikels bitte den begleitendes Repo, damit Sie die Konzepte in Aktion sehen können. Zu wissen, wie man ein Element dreht, ist eine wertvolle Ergänzung Ihrer CSS-Toolbox.
CSS-rotation()
Mit der CSS-rotate()-Funktion können Sie rotieren ein Element auf einer 2D-Achse. Die Funktion rotation() akzeptiert ein Argument: den Winkel, um den Sie Ihr Webelement drehen möchten. Sie können ein Element im oder gegen den Uhrzeigersinn drehen.
Schauen Sie sich die Syntax fur die Funktion rotate() an:
Der Wert "angle‚" stellt die Gradzahl dar, um die sich das Element drehen soll. Sie k√∂nnen eine Drehung im Uhrzeigersinn mit einer positiven Gradzahl (zB 45) angeben. Oder Sie k√∂nnen mit einem negativen Gradwert (zB -39) in die entgegengesetzte Richtung drehen.
Die Funktion rotate() kann auf jedes HTML-Element angewendet werden. Sie können beispielsweise einen Textabsatz drehen. Oder Sie können ein Bild drehen.
Eine HTML-Drehung wird angezeigt, sobald Sie die Seite rendern, sodass keine Drehung sichtbar ist. Um die Rotation in Aktion zu sehen, sollten Sie einen CSS-Übergang verwenden. Übergänge ändern den Zustand eines Elements, wenn eine Aktion ausgefuhrt wird, beispielsweise wenn ein Cursor uber ein Element fährt.
rotate() CSS-Beispiel
Lass uns fortfahren und unsere HTML-Seite erstellen, auf der ein rotierendes K√§stchen platziert werden soll. Lass uns ein K√§stchen als Div hinzufugen und Geben Sie ihm eine Klasse (benennen Sie es "rotieren‚").
Jetzt fugen wir etwas Styling hinzu:
Aktualisieren. Cool, wir haben eine farbige Box. Damit farbigen Kästchen, haben wir alles, was wir brauchen, um die Funktion "rotate()" zu verwenden.
Um unsere Box zu drehen, mussen wir zuerst die Transformationseigenschaft besprechen.
Die Die CSS-Transformationsfunktion transformiert, wie der Name schon sagt, Elemente. Eine der Funktionen, die wir darauf anwenden können, ist rotate(). Die Eigenschaft transform kann viele andere Funktionen ubernehmen und es gibt viele Dinge, die wir mit transform machen können. Rotate ist nur eine davon.
Die Rotate-Funktion verschiebt ein Element. Es braucht ein Argument: die Gradzahl, um die das Element geneigt werden soll. Machen wir weiter und wenden eine positive Drehung von 35 Grad an:
Wir haben unsere Box gedreht! Tippen Sie auf die Ruckseite.
Drehen ermöglicht ausgefallene Ideen fur die Benutzeroberfläche oder das Drehen von Bildern. Sie können beispielsweise ein Bild um 180 Grad drehen. Wenn Sie das gedrehte Bild woanders benötigen, speichern Sie es einfach und verwenden Sie es entsprechend.
Eine andere Sache, die Sie drehen können, ist Text. Nehmen wir an, Sie erstellen ein Layout, das eine Zeitschrift imitiert. Sie können den Text tatsächlich drehen, um Textelemente hervorzuheben.
Und das ist nicht alles, was Sie mit rotate( ). Die Rotationsfunktion ermöglicht es uns, einige wirklich coole Animationen zu machen!
Lass uns fortfahren und verwenden den CSS:hover-Selektor auf unserem div, um tatsächlich einen schönen Rotationseffekt anzuwenden:
Isn " t das cool & # 128526;?
Unsere Box dreht sich, wenn wir mit der Maus daruber fahren. Wir verwenden die CSS-Eigenschaft background-color, um die Farbe unserer Box zu ändern, wenn wir daruber fahren .
Schlussfolgerung
Die CSS-Funktion rotate() lässt ein Webelement in einem Winkel erscheinen Diese Funktion akzeptiert ein Argument: die Gradzahl das Element sollte gedreht werden. Sie können entweder einen positiven oder einen negativen Gradwert angeben.
Mit rotierenden Elementen können Sie Ihre Webseiten ästhetisch ansprechender gestalten. Sie können beispielsweise eine Drehung auf ein Feld anwenden, wenn der Benutzer mit dem Cursor daruber fährt. Oder Sie entscheiden sich, einen Link zu drehen, wenn ein Benutzer mit der Maus daruber fährt. Es liegt an Ihnen, wie Sie diese Fähigkeit einsetzen!
Möchten Sie mehr uber CSS erfahren? In unserem vollständigen Leitfaden zum Erlernen von CSS finden Sie fachkundige Ratschläge und Anleitungen zu den wichtigsten Lernressourcen.
