funkcja obracania() w CSS wykonuje transformację obrotu 2D na elemencie wokół ustalonego środka. Blok nie odkształca się i nie wpływa na położenie sąsiednich kontenerów HTML. Metoda umożliwia określenie kąta obrotu. Dodatkowo istnieje możliwość ustawienia dowolnego środka obrotu.
Transformacja blokowa
W CSS, rotate() to funkcja transformująca, więc musi być przekazana do właściwości transform elementu.
Element ( przekształcenie: obrót(45deg); )
Pierwszym i jedynym argumentem jest kąt, o jaki obiekt zostanie obrócony. Obrót odbywa się w przestrzeni dwuwymiarowej. W przypadku przekształceń 3D istnieją funkcje CSS rotateX(), rotateY(), rotateZ()() i rotate3d().
Miejsce pierwotnie zajmowane przez element na stronie pozostaje dla niego zarezerwowane. Ruch wizualny następuje w nowej warstwie, bez przesuwania sąsiednich bloków.
Kąt obrotu
Argument kąta przekazany do metody musi być typu CSS
Kąt dodatni określa obrót obiektu w kierunku zgodnym z ruchem wskazówek zegara, kąt ujemny - w kierunku przeciwnym.
Środek obrotu
Domyślnie blok jest obracany wokół jego geometrycznego środka. Aby zmienić ten punkt, musisz użyć właściwości transform-origin.
Domyślnie przyjmuje trzy parametry, które definiują współrzędne x, y i z. Ale ponieważ rotate() w CSS jest transformacją 2D, wystarczy przekazać tylko dwie wartości.
Element ( transform: rotate(45deg); transform-origin: 20px 100%; )
Współrzędną dla każdej osi można określić w dowolnej prawidłowej jednostce długości, jako procent rozmiaru bloku lub przy użyciu słów kluczowych góra, dół, lewo, prawo. Początek znajduje się w lewym górnym rogu prostokątnego pojemnika.
Animacja obrotu
Własność transform dobrze nadaje się do dynamicznej zmiany, dlatego CSS umożliwia tworzenie animacji obrotu elementu w przestrzeni dwuwymiarowej.
Jeśli chcesz obrócić obiekt w odpowiedzi na określoną akcję użytkownika, taką jak najechanie kursorem, możesz użyć właściwości przejścia CSS, aby spowolnić zmianę wartości innych właściwości.
Element ( przejście: transformacja 2s; ) element:hover ( transformacja: obrót(180deg); )
Do oryginalnego elementu nie są stosowane żadne przekształcenia, ale po najechaniu na niego blok będzie płynnie obracał się o 180 stopni przez dwie sekundy. Gdy użytkownik usunie kursor, nastąpi ten sam płynny obrót do pierwotnej pozycji.
Bardziej złożonym sposobem animowania obiektu jest zdefiniowanie dla niego sekwencji klatek za pomocą właściwości i reguły @keyframes.
Element ( nazwa-animacji: obrót; czas trwania animacji: 2s; liczba-iteracji animacji: nieskończona; funkcja czasu animacji: linear; ) @keyframes rotate ( from ( transform: rotate(0deg); ) do ( transform: rotate (360 stopni); ) )
Animacja obracania jest stosowana do określonego elementu, określając pełny obrót od 0 do 360 stopni w ciągu dwóch sekund. Właściwość animation-iteration-count ustawia animację powtarzania w nieskończoność, a funkcja Animation-timing ustawia płynny efekt przejścia. Połączenie właściwości w z obracaniem-transformacją pozwala na tworzenie pięknych efektów dynamicznych.
Czasami nietypowe decyzje projektowe zmuszają projektanta layoutu do uciekania się do tych samych niestandardowych rozwiązań podczas układania tekstu. Na przykład obróć jeden z elementów tekstowych o określony kąt. W tym artykule omówimy kilka prostych rozwiązań tego problemu.
Zastępowanie tekstu obrazem
Najbardziej prymitywnym rozwiązaniem tego problemu będzie użycie obrazu. Za pomocą cieszącego się złą sławą programu Adobe Photoshop tekst można łatwo obracać pod dowolnym kątem. Jak rozumiesz, użycie tej metody nie wymaga dużej inteligencji.
W niektórych sytuacjach nie można użyć innej metody, ale w większości przypadków odchodzą od używania obrazu. Wynika to z szeregu wad towarzyszących tej technice:
- Niemożność skopiowania przez użytkownika informacji z określonego kontenera;
- Złożoność procedury dokonywania poprawek w części tekstowej elementu;
- Zwiększony ruch na serwerze witryny;
- Wzrost żądań do serwera podczas aktualizacji zasobu.
Pomimo tego, że było tak wiele negatywnych aspektów korzystania z obrazu, metoda ta ma kilka pozytywnych efektów.
- Kompatybilność z różnymi przeglądarkami– brak problemów podczas wyświetlania w różnych przeglądarkach.
- Wysoka umiejętność pozycjonowania obrazu.
Jednak w tym przypadku przeważają negatywne strony. Radzę poszukać innych rozwiązań.
Korzystanie z właściwości transformacji CSS
Zastosowanie tej metody jest znacznie większe w porównaniu z obrazem. Istotną różnicą jest elastyczność w edycji tekstu oraz możliwość zaznaczania i kopiowania zawartości obróconego kontenera. Główną przeszkodą w rozwoju tej techniki była kompatybilność z różnymi przeglądarkami. Do tej pory osiągnęliśmy na tym froncie całkiem dobre wyniki, co umożliwia bezproblemowe zastosowanie właściwości transform.
Istotą tej właściwości jest stopniowe dzielenie płaszczyzny. W rezultacie, po określeniu określonego kąta, pojemnik przyjmie odpowiednią pozycję. Należy zauważyć, że nieruchomość w czystej postaci nie jest stosowana. Powinny mu towarzyszyć właściwości dostawcy, które w rzeczywistości zapewniają wysoki wskaźnik zgodności z różnymi przeglądarkami.
Należy zauważyć, że to nie tekst wewnątrz bloku zmienia pozycję, ale sam blok, do którego właściwość jest adresowana za pomocą selektora klasy lub w inny sposób. Poniżej przykład zastosowania metody
Container ( - moz- transform: rotate(- 45deg) ; - webkit- transform: rotate(- 45deg) ; - o- transform: rotate(- 45deg) ; - ms- transform: rotate(- 45deg) ; transform: rotate( -45 stopni) ; )
W rezultacie otrzymujemy coś takiego:
Zwracam się do tej właściwości, projekt będzie wyświetlany bez problemów w przeglądarkach Firefox, Opera, Internet Explower i innych przeglądarkach webkit.
Dzwonienie przez Javascript
Istota procesu jest całkowicie podobna do tej rozważanej przed tą metodą. Aby go zaimplementować, potrzebujesz minimalnej znajomości kodu js, matematyki i zrozumienia filtra Matrix.
javascript
var deg2radiany = Matematyka. PI * 2 / 360 , stopnie = - 4 ; rad = deg * deg2radiany, costheta = matematyka. cos (rad) , sintheta = Matematyka. grzech(rad) ; jQuery(".rotatedBlock") . css((filtr: "progid:DXImageTransform.Microsoft.Matrix(M11="+ costheta+ ", M12=" + (- 1 ) * sintheta+ ", M21=" + sintheta+ ", M22=" + costheta+ ",SizingMethod="automatyczne rozwijanie", włączone=prawda)"} ) ;
W rezultacie otrzymamy w przeglądarce taki sam obraz, jak przy użyciu właściwości transform.
Nawet jeśli nie rozumiesz ani jednego znaku z tego wpisu, nie ma to znaczenia. Aby pracować z tym kodem, wystarczy zrozumieć, że wartość kąta jest zapisana w drugiej linii, zastępujesz ją sobie, reszta jest po prostu kopiowana bez zmian.
Funkcje korzystania z JavaScript i CSS
Te dwie metody mają kilka drobnych różnic w zasadzie działania, które są bardzo ważne, aby je poznać i wziąć pod uwagę.
Pierwsza różnica polega na różnicy między wysokością klocka a jego pozycją. Wyjście z sytuacji jest dość proste i polega na wykorzystaniu właściwości margin. Poprzez wcięcie ustawiamy klocek na żądanym poziomie i pozycji. Inne niespójności pozycjonowania można rozwiązać, nadając blokowi wartość pozycjonowanie bezwzględne, co również jest skuteczne.
Bardziej złożone i niestandardowe podejście opiera się na wykorzystaniu właściwości transform-origin. Istota tej techniki zostanie opisana w kolejnych artykułach.
Kolejna różnica tkwi w istocie samej tury. Podczas korzystania z kodu js punkt obrotu znajduje się na krawędzi bloku. W drugiej metodzie ten punkt znajduje się w środku elementu. Aby ułatwić zrozumienie, spójrz na poniższy obrazek.
Wizualny model formatowania CSS opisuje układ współrzędnych w każdym pozycjonowanym elemencie. Układ współrzędnych jest punktem odniesienia dla właściwości odsunięcia. Położenie i wymiary w tej przestrzeni współrzędnych można traktować jako dane w pikselach względem początku, z dodatnimi wartościami w prawo iw dół. Tę przestrzeń współrzędnych można zmienić za pomocą właściwości transform.
Przekształcenia CSS3 pozwalają na przesuwanie, obracanie i skalowanie elementów. Transformacje przekształcają element bez wpływu na inne elementy strony internetowej, tj. inne elementy nie poruszają się względem niego.
Do elementów, które mogą być transformowane należą elementy z wyświetlaniem: blok; i wyświetlacz: inline-block; , a także elementy, których wartość właściwości wyświetlania ma postać table-row , table-row-group , table-header-group , table-footer-group , table-cell lub table-caption . Element jest uważany za przekształcony, jeśli jego właściwość transform jest ustawiona na dowolną wartość inną niż none .
Istnieją dwa rodzaje przekształceń CSS3 − 2D I 3D. transformacje 2D przekształcać elementy w przestrzeni dwuwymiarowej za pomocą macierzy transformacji 2D. Ta macierz służy do obliczania nowych współrzędnych obiektu na podstawie wartości właściwości transform i transform-origin. Przekształcenia wpływają tylko na renderowanie wizualne. Jeśli chodzi o układ strony, mogą powodować przepełnienie treści bloku. Domyślnie punkt transformacji znajduje się w środku elementu.
Transformacje elementów 2D
Obsługa przeglądarki
TJ: 10,0, 9,0 -ms-
krawędź: 12.0
Firefox: 16,0, 3,5 -moz-
Chrom: 36,0, 4,0 -webkit-
safari: 9.0, 3.1 -webkit-
opera: 23.0, 15.0 -webkit-
Safari na iOS: 9, 7.1 -webkit-
Przeglądarka Androida: 53, 2.1 -webkit-
Chrome na Androida:-webkit-
1. Funkcje transformacji 2D transform
Właściwość określa typ transformacji elementu. Nieruchomość jest opisana za pomocą funkcje transformacji, które przesuwają element względem jego aktualnej pozycji na stronie lub zmieniają jego oryginalny rozmiar i kształt. Nie dziedziczone.
Prawidłowe wartości:
matrix() - dowolna liczba
translate() , translateX() , translateY() — jednostki długości (dodatnie i ujemne), %
scale() , scaleX() , scaleY() - dowolna liczba
rotate() - kąt (stopień, grad, rad lub zakręt)
skew() , skewX() , skewY() - kąt (stopnie, grad, rad)
| Funkcjonować | Opis |
|---|---|
| Żaden | Wartość domyślna oznacza brak transformacji. Anuluje również transformację dla elementu z grupy transformowanych elementów. |
| macierz(a, c, b, d, x, y) | Odsuwa elementy i definiuje sposób ich przekształcania, umożliwiając połączenie wielu funkcji transformacji 2D w jedną. Obracanie, skalowanie, pochylanie i zmiana położenia są dozwolone jako przekształcenia. Wartość a zmienia skalę poziomą. Wartość od 0 do 1 zmniejsza element, więcej niż 1 go zwiększa. Wartość c deformuje (przesuwa) boki elementu wzdłuż osi Y, wartość dodatnia - w górę, wartość ujemna - w dół. Wartość b deformuje (przesuwa) boki elementu wzdłuż osi X, wartość dodatnia - w lewo, wartość ujemna - w prawo. Wartość d zmienia skalę pionową. Wartość mniejsza niż 1 zmniejsza element, więcej niż 1 go zwiększa. Wartość x przesuwa element wzdłuż osi x, dodatnia - w prawo, ujemna - w lewo. Wartość y przesuwa element wzdłuż osi Y, wartość dodatnia przesuwa się w dół, a wartość ujemna przesuwa go w górę. |
| przetłumacz(x,y) | Przesuwa element do nowej pozycji, przesuwając go z normalnej pozycji w prawo i w dół, używając współrzędnych X i Y, bez wpływu na sąsiednie elementy. Jeśli chcesz przesunąć element w lewo lub w górę, musisz użyć wartości ujemnych. |
| przetłumaczX(n) | Odsuwa element względem jego normalnej pozycji X. |
| przetłumaczY(n) | Przesuwa element względem jego normalnego położenia wzdłuż osi Y. |
| skala (x,y) | Skaluje elementy, powiększając je lub zmniejszając. Wartości od 0 do 1 zmniejszają element. Pierwsza wartość skaluje element na szerokość, druga na wysokość. Ujemne wartości odzwierciedlają element. |
| skalaX(n) | Funkcja skaluje element na szerokość, czyniąc go szerszym lub węższym. Jeśli wartość jest większa niż jeden, element staje się szerszy, jeśli wartość zawiera się w przedziale od jednego do zera, element staje się węższy. Wartości ujemne odwracają element w poziomie. |
| skala Y(n) | Funkcja skaluje element na wysokość, czyniąc go wyższym lub krótszym. Jeśli wartość jest większa niż jeden, element staje się wyższy; jeśli wartość zawiera się między jeden a zerem, jest niższy. Ujemne wartości odzwierciedlają element w pionie. |
| obróć (kąt) | Obraca elementy o określoną liczbę stopni, wartości ujemne od -1 stopni do -360 stopni obracają element przeciwnie do ruchu wskazówek zegara, wartości dodatnie obracają element zgodnie z ruchem wskazówek zegara. Wartość rotate(720deg) obraca element o dwa pełne obroty. |
| pochylenie (kąt x, kąt y) | Służy do deformowania (zniekształcania) boków elementu względem osi współrzędnych. W przypadku podania jednej wartości, druga zostanie określona automatycznie przez przeglądarkę. |
| pochylenieX(kąt) | Odkształca boki elementu wokół osi x. |
| pochylenie Y (kąt) | Odkształca boki elementu wokół osi Y. |
| Inicjał | Ustawia wartość właściwości na jej wartość domyślną. |
| dziedziczyć | Dziedziczy wartość właściwości z elementu nadrzędnego. |
Składnia
Div ( -webkit-transform: obrót(360deg); -ms-transform: obrót(360deg); transform: obrót(360deg); )
Najedź myszką na bloki, aby zobaczyć, jak działają funkcje transformacji.
2. punkt początkowy transformacji
Właściwość pozwala na przesunięcie środka transformacji, względem którego zmienia się pozycja/rozmiar/kształt elementu. Wartość domyślna to center lub 50% 50% . Ustaw tylko dla przekształconych elementów. Nie dziedziczone.
- Tłumaczenie
Witam, drogi habradrug! Istnieje wiele przykładów wspaniałych przekształceń i przejść CSS3 w Internecie. W tym artykule zwrócimy się do podstaw CSS3 i dowiemy się, jak stworzyć coś takiego. Ten samouczek będzie przydatny dla tych, którzy dopiero zaczynają poznawać CSS3. Zacznijmy!
System współrzędnych
Aby łatwiej zrozumieć, jak działa ruch obiektu, będziemy pracować w układzie współrzędnych.
Jednak nasz układ współrzędnych ma jedną osobliwość: oś Y jest skierowana w przeciwnym kierunku niż zwykle. Czemu? Faktem jest, że HTML i CSS (wraz z np. ActionScript) używają odwrotnego układu współrzędnych, ponieważ strona internetowa zaczyna się od lewego górnego rogu i schodzi w dół.
Notatka: Zakładamy, że znasz już strukturę HTML i CSS. Pominę wyjaśnianie, jak skonfigurować plik CSS, jak umieszczać obrazy itp. Skupimy się na animowaniu obrazów. Jeśli nie jesteś pewien, czy Twoje umiejętności są na wysokim poziomie, radzimy zapoznać się z kursem lekcji „HTML i CSS w 30 dni” (bezpłatne i na język angielski), aby dowiedzieć się wszystkiego, czego potrzebujesz.
1: ruch poziomy
Pierwszy ruch, który zademonstrujemy, jest poziomy. Przesuniemy obiekty od lewej do prawej iz prawej na lewą.Ruch w prawo
Do przesunięcia obiektu użyjemy przekształć: przetłumacz(x,y), gdzie X jest liczbą dodatnią, a Y=0.
HTML
Otwórz swój ulubiony edytor kodu i wpisz:
Dla obrazu zdefiniowaliśmy trzy klasy:
- obiekt: Ustalenie głównych zasad naszego obiektu.
- van: Będziemy używać różnych obiektów, aby zademonstrować każdy rodzaj animacji.
- move-right: Używając tej klasy, przeniesiemy nasz obiekt.
Najpierw umieścimy nasz obiekt (obraz ciężarówki) na środku.
.object ( pozycja: bezwzględna; ) .van ( góra: 45%; lewa: 44%; )
W tym przykładzie przesuniemy obiekt o 350px w prawo. Użyta składnia transformacja: przetłumacz(350px,0);. Ponadto obiekt przesunie się tylko wtedy, gdy najedziesz na niego kursorem: #axis: najedź .przesuń w prawo.
#axis:hover .move-right( transform: translate(350px,0); -webkit-transform: translate(350px,0); /** Chrome i Safari **/ -o-transform: translate(350px,0) ; /** Opera **/ -moz-transform: translate(350px,0); /** Firefox **/ )
Parametr przekształcać po prostu przesunie obiekt z jednego punktu do drugiego, ale nie stworzy animacji tego ruchu. Aby to naprawić, musimy dodać parametr move w klasie .object.
Obiekt ( pozycja: bezwzględna; przejście: łatwość-wyjścia wszystkich dwójek; -przejście webkit-przejścia: łatwość-wyjścia wszystkich dwójek; /** Chrome i Safari **/ -moz-transition: łatwość-wyjścia wszystkich dwójek; ; /** Firefox **/ -o-transition: ułatwienie wejścia wszystkich 2; /** Opera **/ )
Ta reguła przenoszenia nakaże przeglądarce animację wszystko parametry obiektu włączone 2 sekundy(bez zwłoki) za pomocą funkcji wyluzowanie.
Możemy użyć 6 różnych funkcji czasu ruchu:
- liniowy: Porusza się ze stałą prędkością od początku do końca.
- łatwość: Ruch zaczyna się powoli, a następnie nabiera tempa.
- łatwość: Ruch zaczyna się powoli.
- wyluzować: Ruch kończy się powoli.
- wyluzować: Ruch zaczyna się i kończy powoli.
- sześcienny-bezier: Ręcznie zdefiniuj wartość ruchu.
Przesuwam się w lewo
Aby przesunąć obiekt w lewo, wystarczy umieścić na osi wartość ujemną OH, dopóki Y pozostaje bez zmian. W naszym przypadku przeniesiemy obiekt do - 350px w lewo.
HTML
Stwórz nowy dokument html i wklej następujący kod:
Tym razem korzystamy z klasy przesuń w lewo, aby przesunąć obiekt w lewo.
css
Teraz wpisz -350px dla osi OX. przekształcenie: przetłumacz(-350px,0);- przesuń obiekt w lewo.
#axis:hover .move-left ( transform: translate(-350px,0); -webkit-transform: translate(-350px,0); /** Safari i Chrome **/ -o-transform: translate(-350px ,0); /** Opera **/ -moz-transform: translate(-350px,0); /** Firefox **/ )
Ponieważ już wcześniej zdefiniowaliśmy zasady ruchu, nie musimy tego robić ponownie.
2: Ruch pionowy
Przesuwanie obiektu w pionie nie będzie trudne, ponieważ jest identyczne jak w poziomie. Jedyna różnica polega na tym, że użyjemy wartości -y awansować i cenić tak zejść w dół.poruszać się w górę
HTML
Szablon HTML jest identyczny z poprzednimi przykładami. Zastąpimy jednak nasz obiekt rakietą (dla jasności) i przypiszemy klasę move-up.
css
Podobnie jak w ciężarówce, rakietę umieścimy w centrum:
.rocket ( góra: 43%; lewa: 44%; )
Jak zauważyliśmy wcześniej, współrzędna Y musi być ujemna. W naszym przypadku przesuniemy obiekt 350px w górę.
#axis:hover .move-up ( transform: translate(0,-350px); -webkit-transform: translate(0,-350px); -o-transform: translate(0,-350px); -moz-transform: przetłumacz (0,-350px); )
Schodzimy w dół
Jak zgadłeś, aby przesunąć obiekt w dół, współrzędna Y musi być dodatnia, a X musi wynosić 0. Składnia: przetłumacz(0,y);
HTML
css
#axis:hover .move-down ( transform: translate(0,350px); -webkit-transform: translate(0,350px); -o-transform: translate(0,350px); -moz-transform: translate(0,350px); )
3: ruch po przekątnej
Aby przesunąć obiekt po przekątnej, łączymy parametry x I tak. Składnia będzie następująca: transformacja: przetłumacz(x,y). W zależności od kierunku wartość x I tak może być zarówno pozytywna, jak i negatywna.
HTML
css
#axis:hover .move-ne ( transform: translate(350px,-350px); -webkit-transform: translate(350px,-350px); -o-transform: translate(350px,-350px); -moz-transform: przetłumacz (350px,-350px); )
4: Obrót
Obrót w CSS3 jest kontrolowany przez współrzędne stopni (od 0° do 360°). Aby obrócić obiekt, zastosuj następujące opcje: przekształć: obróć(ndeg); gdzie n- stopni.
Zgodnie z ruchem wskazówek zegara
Aby obrócić obiekt zgodnie z ruchem wskazówek zegara, zastosuj wartość dodatnią dla obróć (ndeg).HTML
css
#axis:hover .rotate360cw ( transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); )
Obrót w lewo
Aby obrócić obiekt w kierunku przeciwnym do ruchu wskazówek zegara, zastosuj wartość ujemną dla obróć (ndeg).
HTML
css
#axis:hover .rotate360ccw ( transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); -moz-transform: rotate(-360deg); )
5: Powiększenie
Skalowanie to interesująca funkcja CSS3. Korzystanie z parametru skala(n) lub parametr skala (x,y), możemy zwiększyć lub zmniejszyć obiekt bezpośrednio w kodzie HTML. Obiekt zmieni rozmiar w zależności od wartości n/x,y, gdzie oś x to szerokość, a y to wysokość.Spójrzmy na następujący przykład.
2.
2.
Obróć element za pomocą CSS 3
Od czasu do czasu projektanci stron internetowych stają przed problemem obracania elementu. Dzięki narzędziom CSS 3 to zadanie ma dość proste rozwiązanie. Ponownie, aby zapewnić zgodność z różnymi przeglądarkami, musisz określić kilka właściwości. Poniżej znajduje się przykładowy kod dla obrócić element o 90 stopni.Kod CSS
#obróć_element(
-transformacja webkit: rotacja (90deg); // obróć element dla różnych przeglądarek
przekształć: obróć (90 stopni);
}
Wyrównanie i kierunek tekstu z CSS 3
Teraz więcej o nieruchomości tryb pisania. Pozwala na ustawienie wyrównania (lewo - prawo) tekstu elementu i co najciekawsze kierunek (poziomy lub pionowy)! Szukamy i próbujemy:lr-tb tekst jest skierowany od lewej do prawej.
rl-tb tekst jest kierowany od prawej do lewej.
tb-rl tekst jest pionowy i wyrównany do góry i do prawej.
bt-rl tekst jest pionowy i wyrównany do dołu i do prawej.
tb-lr tekst jest pionowy i wyrównany do góry i do lewej.
bt-lr tekst jest pionowy i wyrównany do dołu i do lewej.
Na przykładzie frazy tekst idzie tutaj możesz rozważyć wpływ właściwości CSS
Kod CSS
Tekst(
tryb pisania: lr-tb; /* tekst od lewej do prawej */
}
Tekst 1(
tryb pisania: rb-tb; /* tekst jest skierowany od prawej do lewej */
}
Obrót tekstu o 90 stopni i przykład wyrównania tekstu CSS 3
Oto gotowy przykład. Tekst jest obrócony o 90 stopni. Aby to zrobić, po prostu utwórz blok z identyfikatorem rotateText i ustaw dla niego właściwości CSS.Kod HTML i CSS
Przykład Obracanie elementu o 90 stopni za pomocą CSS można zobaczyć pod poniższym linkiem.
