Podczas opracowywania strony internetowej Divs są zwykle umieszczane poziomo na ekranie wyświetlacza domyślnie. Jednak CSS zapewnia kilka sposobów zmiany zmiany DIV zgodnie z preferencjami. Możesz także zmienić orientację i kąt Div za pomocą CSS. W takim przypadku możliwe jest obrócenie DIV zgodnie z wymaganym stopniem.

W tym przewodniku mówisz specjalnie o procedurze obracania div pod kątem 90 stopni. Więc zacznijmy!

Jak obracać 90 stopni DIV w CSS?

Aby obrócić DIV przy 90 stopniach w CSS ”przekształcać„Własność jest używana. Jako pierwszy krok omówimy właściwość transformacji, aby lepiej zrozumieć, jak ona działa.

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

Do transformacji elementu 2D lub 3D, „przekształcać„Zastosowana jest właściwość CSS. Ta właściwość pozwala elementowi obracać się, poruszać, wypaczać i skalować.

Składnia

Składnia właściwości transformacji to:

Transform: Brak | Funkcje transformacji

Oto opis powyższych wartości:

• nic: Służy do ograniczenia transformacji dowolnego elementu.
• Funkcje transformacji: Istnieją różne funkcje, takie jak „obracać się()”,„skala()”,„przenosić()" I "krzywy()„Można określić.

Przejdźmy teraz do praktycznego przykładu użycia właściwości transformacji do obracania DIV 90 stopni w CSS.

Przykład: Obracanie DIV 90 stopni za pomocą właściwości CSS „Transform”

Przede wszystkim w HTML stworzymy nagłówek za pomocą

tag i pojemnik o nazwie klasy jako „div2”:

Obróć Div 90 stopni:

Rotacja div

Następnie w CSS użyj „div„Aby uzyskać dostęp do utworzonego kontenera w pliku HTML. Następnie ustaw szerokość i wysokość Div jako „200px" I "100px”, Ustaw kolor tła Div jako„RGB (129, 129, 38)". Ponadto ustawimy granicę Div jako „5px" szerokość, "solidny”Typ i„czerwony" kolor:

div
szerokość: 200px;
Wysokość: 100px;
Tło: RGB (129, 129, 38);
granica: 5px stały czerwony;

Wynik danego kodu jest:

Teraz zastosuj „przekształcać„Nieruchomość i przepustka”90„Stopnie jako argument funkcji rotacji () i transformacji jako„30%”:

Transform: Rotate (90DEG);
Transform-origin: 30%;

Zapisz dodany kod i otwórz plik HTML w przeglądarce. W rezultacie zobaczysz, że dodany div jest obrócony o 90 stopni:

Zebraliśmy najłatwiejszą metodę obrócenia DIV 90 stopni w CSS.

Wniosek

Do obrotu DIV 90 stopni w CSS, „przekształcać„Własność można wykorzystać. Jest używany do transformacji elementów 2D lub 3D. Dodatkowo ta właściwość umożliwia obracanie elementu HTML, wypażenie, skalowanie i przenoszenie. W tym podręczniku omówiono procedurę obracania DIV 90 stopni w CSS.