Normalerweise, wenn Text zu einer Webseite in einer horizontalen Position auf dem Anzeigebildschirm hinzugefügt wird. CSS bietet jedoch verschiedene Möglichkeiten, um die Textposition entsprechend den Vorlieben zu ändern. Wir können auch die Richtung und den Winkel des Textes unter Verwendung von CSS -Eigenschaften ändern. Insbesondere kann der Text bei 90 Grad gedreht werden.

In diesem Handbuch werden Sie unterrichtet, wie Sie den Text um 90 Grad drehen. Also lasst uns anfangen!

So drehen Sie Text 90 Grad in CSS?

Um den Text bei 90 Grad in CSS zu drehen, ist das “verwandelnEigenschaft wird verwendet. Bevor wir es verwenden, werden wir zunächst diese CSS -Eigenschaft für ein besseres Verständnis besprechen.

Was ist „Transformation“ -Reach in CSS?

Der "verwandeln”Eigenschaft wird für die 2D- und 3D -Transformation eines beliebigen Elements verwendet. Diese Eigenschaft ermöglicht es einem Element, sich zu drehen, zu bewegen, zu schießen und zu skalieren. Sie können diese Eigenschaft auch zum Drehen des hinzugefügten Textes bei 90 Grad verwenden.

Syntax

Syntax der “verwandelnEigentum ist:

Transformation: Keine | Transformationsfunktionen

Beschreibung der obigen Werte sind:

• keiner: Es wird verwendet, um kein Element zu transformieren.
• Transformationsfunktionen: Es kann verwendet werden, um verschiedene Funktionen anzugeben, wie z.

Wechseln wir zum praktischen Beispiel, um die Transformationseigenschaft für rotierende Text in 90 Grad zu verwenden.

Beispiel: rotierende Text 90 Grad in CSS

In der von HTML werden wir eine Überschrift und einen Absatz verwenden

Und

Tag: Tag:

LinuxHint

Textrotation in 90 Grad

Dies zeigt die folgende Ausgabe:

Jetzt werden wir zum CSS wechseln und die “anwendenverwandelnEigentum dazu. Um dies zu tun, verwenden Sie “P”Zu dem in der HTML -Datei erstellten Absatz zugreifen. Verwenden Sie danach die Transformationseigenschaft und setzen Sie den Rotationswinkel als "90 Grad”In der rotate () -Funktion. Verwenden Sie als nächstes die “Transform-Origin”Eigenschaft und setzen Sie ihren Wert auf"linksUm den Text im Uhrzeigersinn zu drehen. Darüber hinaus setzen wir die Margin-Links “70px„Um den Rand von der linken Seite des Absatzes zu geben und zum Styling Schriftgewicht und Schriftgröße als" zu stylen "zu gebenmutiger" Und "x-large", bzw:

P
Transformation: Drehen (90 Grad);
Transform-Origin: Links;
Rand-Links: 70px;
Schriftgewicht: mutiger;
Schriftgröße: x-large;

Notiz: Hier das "Transform-OriginDie Eigenschaft wird verwendet, um die X-Achse und die y-Achse der Rotation festzulegen.

Gehen Sie nach der Implementierung des obigen Codes zum HTML und führen Sie ihn aus, um das folgende Ergebnis zu sehen:

Es kann beobachtet werden, dass die Verwendung der “verwandelnEigentum, unser Text wird erfolgreich um 90 Grad gedreht.

Abschluss

Um den Text bei 90 Grad zu drehen, das “verwandelnEigenschaft wird verwendet. Der Drehwinkel ist nach dem angegebenen Gradwert festgelegt. Mit dieser Weise können Sie auch verschiedene Winkel des Textes entsprechend Ihrer Wahl definieren. In diesem Artikel haben wir erklärt, wie man den Text um 90 Grad mithilfe eines Beispiels um 90 Grad dreht.