Zwykle, gdy tekst jest dodawany do strony internetowej w pozycji poziomej na ekranie wyświetlacza. Jednak CSS zapewnia różne sposoby zmiany pozycji tekstu zgodnie z preferencjami. Możemy również zmienić kierunek i kąt tekstu za pomocą właściwości CSS. Mówiąc dokładniej, tekst można obracać na 90 stopni.

Ten podręcznik nauczy Cię, jak obracać tekst w 90 stopniach. Więc zacznijmy!

Jak obracać tekst o 90 stopni w CSS?

Aby obrócić tekst na 90 stopni w CSS, „przekształcać„Własność jest używana. Przed użyciem, po pierwsze, omówimy tę właściwość CSS w celu lepszego zrozumienia.

Czym jest „przekształcenie” właściwości w CSS?

„„przekształcać„Właściwość jest używana do transformacji 2D i 3D dowolnego elementu. Ta właściwość pozwala elementowi obracać się, poruszać, wypaczać i skalować. Możesz także użyć tej właściwości do obracania dodanego tekstu przy 90 stopniach.

Składnia

Składnia „przekształcać„Nieruchomość to:

Transform: Brak | Funkcje transformacji

Opis powyższych wartości to:

• nic: Służy do ustawiania transformacji na żadnym elemencie.
• Funkcje transformacji: Można go użyć do określania różnych funkcji, takich jak rotate (), scale (), ruch () i skew ().

Przejdźmy do praktycznego przykładu, aby wykorzystać właściwość transformacji do obracania tekstu w 90 stopniach.

Przykład: Obracający tekst 90 stopni w CSS

W HTML dodamy nagłówek i akapit za pomocą

I

odpowiednio tag:

Linuxhint

Rotacja tekstu w 90 stopnie

To pokaże następujące dane wyjściowe:

Teraz przeprowadzimy się do CSS i zastosujemy „przekształcać„Własność do tego. Aby to zrobić, użyj „P„Aby uzyskać dostęp do akapitu utworzonego w pliku HTML. Następnie użyj właściwości transformacji i ustaw kąt rotacji jako „90 stopnie”W funkcji ROTATE (). Następnie użyj „Transform-origin„Właściwość i ustawiaj jej wartość”lewy„Aby obrócić tekst w kierunku zgodnie z ruchem wskazówek zegara. Ponadto ustawiamy margines „lewica”70px„Aby dać margines z lewej strony akapitu, a dla stylizacji ustaw czcionek i rozmiar czcionki jako„odważniejszy" I "X-Large”Odpowiednio:

P
Transform: Rotate (90DEG);
Transform-origin: lewy;
margines lewica: 70px;
Font-Weight: Bolder;
Rozmiar czcionki: X-Large;

Notatka: Tutaj "Transform-origin„Właściwość służy do ustawiania osi x i osi y rotacji.

Po wdrożeniu powyższego kodu, przejdź do HTML i wykonaj go, aby zobaczyć następujący wynik:

Można zaobserwować, że użycie „przekształcać„Własność, nasz tekst jest z powodzeniem obracany na 90 stopni.

Wniosek

Aby obrócić tekst na 90 stopni, „przekształcać„Własność jest używana. Kąt obrotu jest ustawiany zgodnie z określoną wartością stopnia. Korzystając z tego, możesz również zdefiniować różne kąty tekstu zgodnie z wyborem. W tym artykule wyjaśniliśmy, jak obrócić tekst 90 stopni za pomocą właściwości transformacji za pomocą przykładu.