Während der Entwicklung einer Webseite werden Divs normalerweise standardmäßig horizontal auf dem Display -Bildschirm platziert. CSS bietet jedoch verschiedene Möglichkeiten, Divs nach den Vorlieben neu zu ordnen. Sie können auch die Ausrichtung und den Winkel des DIV mit CSS ändern. In diesem Fall ist es möglich, die DIV gemäß dem erforderlichen Abschluss zu drehen.

In diesem Leitfaden werden Sie speziell über das Verfahren sprechen, um einen Div in einem Winkel von 90 Grad zu drehen. Also lasst uns anfangen!

Wie man Div um 90 Grad in CSS dreht?

Um das Div bei 90 Grad in CSS zu drehen “verwandelnEigenschaft wird verwendet. Als erster Schritt werden wir die Transformationseigenschaft besprechen, damit Sie besser verstehen können, wie sie funktioniert.

Was ist „Transformation“ -Reach in CSS?

Für die Transformation eines 2D- oder 3D -Elements das “verwandeln”Eigenschaft von CSS wird verwendet. Diese Eigenschaft ermöglicht es einem Element, sich zu drehen, zu bewegen, zu schießen und zu skalieren.

Syntax

Die Syntax der Transformationseigenschaft lautet:

Transformation: Keine | Transformationsfunktionen

Hier ist die Beschreibung der oben genannten Werte:

• keiner: Es wird verwendet, um die Transformation eines beliebigen Elements einzuschränken.
• Transformationsfunktionen: Es gibt verschiedene Funktionen wie "drehen()","Skala()","Umzug()" Und "schief ()Das kann angegeben werden.

Wechseln wir nun zum praktischen Beispiel für die Verwendung der Transformationseigenschaft zum Drehen eines Div -90 -Grad -Divs in CSS.

Beispiel: Drehen Sie eine Div -90 -Grad -Eigenschaft mit der CSS -Eigenschaft „Transformation“

Erstens werden wir im HTML eine Überschrift verwenden

Tag und einen Container mit dem Klassennamen als “Div2”:

Div um 90 Grad drehen:

Rotation von Div

Dann in CSS verwenden ““div”Zu Zugang zum erstellten Container in der HTML -Datei. Setzen Sie danach die Breite und Höhe des DIV als "200px" Und "100px"Setzen Sie die Hintergrundfarbe der Div als" als "RGB (129, 129, 38)”. Darüber hinaus werden wir die Grenze von Div als “festlegen“5px" Breite, "solide”Typ und“Rot" Farbe:

div
Breite: 200px;
Höhe: 100px;
Hintergrund: RGB (129, 129, 38);
Grenze: 5px solide Rot;

Das Ergebnis des angegebenen Code ist:

Wenden Sie nun das an “anverwandeln”Eigentum und Pass“90"Grad als Argument für die Rotate () -Funktion und Transform-Origin als"30%”:

Transformation: Drehen (90 Grad);
Transform-Origin: 30%;

Speichern Sie den hinzugefügten Code und öffnen Sie die HTML -Datei im Browser. Infolgedessen werden Sie feststellen, dass der zusätzliche Div um 90 Grad gedreht wird:

Wir haben die einfachste Methode zum Drehen von Div um 90 Grad in CSS zusammengestellt.

Abschluss

Für die Rotation von 90 Grad in CSS, das “,“verwandelnEigenschaft kann verwendet werden. Es wird zur Transformation von 2D- oder 3D -Elementen verwendet. Darüber hinaus ermöglicht diese Eigenschaft ein HTML. In diesem Handbuch wurde das Verfahren des Drehens eines Div 90 Grad in CSS erörtert.