CSS obraca się 10 stopni
Przykład 01
Zacznijmy od pokazania, w jaki sposób element HTML można obrócić o 90 stopni. Ten przykład został zainicjowany z głównym tagiem „HTML”, a następnie znacznika „Head”, tytułu naszej strony internetowej HTML z „CSS Rotate 90 stopni” w znaczniku „Tytuł”. Element ciała tego kodu HTML został zainicjowany z nagłówkiem rozmiaru 1, i.mi., Największy nagłówek HTML. To tylko proste nagłówek bez obrotu. Następnie mamy sekcję „Div”, która zostanie również umieszczona normalnie na ekranie strony internetowej HTML bez żadnej rotacji.
Kolejna sekcja „Div” została tutaj użyta z określoną klasą „Rotated”. Obie sekcje DIV zawierają w nich trochę tekstu, ale druga sekcja „Div” zostanie obrócona na ekranie, podczas gdy pierwszy pozostanie normalny. Element „ciała” jest teraz zamknięty, a my jesteśmy tutaj na tagu „stylu”, aby stylizować tę stronę HTML. Obie sekcje „div” zostały stylizowane z szerokością i wysokością 100 pikseli, z pewnym kolorem nieba tła. Następnie klasa „obrócona” została użyta do stylizowania drugiego Div do 90 stopni przy użyciu właściwości „transformacji” CSS z czerwonym kolorem tła. Ze względu na użycie koloru tła w drugim „div” w swojej klasie drugi kolor zastąpi pierwszy kolor w tej konkretnej sekcji Div. Zapiszmy ten kod i uruchom go za pomocą menu „Uruchom” kodu Visual Studio.
Mamy wyjście poniżej podsumowującego tego skryptu HTML. Pierwszy Div jest umieszczony normalnie na naszym ekranie przeglądarki bez żadnego obrotu. Podczas gdy drugi „div” jest obracany o 90 stopni zgodnie z kierunkiem i umieszczeniem jego tekstu za pomocą atrybutu „transform” CSS, i.mi., od góry do dołu.
Przykład 02
W tym przykładzie będziemy używać metody „obrotu” atrybutu transformacji zamiast prostej metody „obracania” do obracania określonego elementu skryptu HTML. Tym razem ponownie użyliśmy tego samego tagów HTML i „Head” po tym samym „tytule”. Obszar nadwozia został zainicjowany z prostym nagłówkiem rozmiaru 1 po prostym znaczniku akapitu zawierającym w nim linię tekstową. Zainicjowano normalną sekcję DIV na stronie HTML, pokazując, że nie zostanie zastosowana rotacja.
Kolejna sekcja „div” została zainicjowana z jego identyfikatorem „obracaj” i będzie zawierał długie zdanie wyjaśniające, że funkcja obrotu została zastosowana do tej Div w celu obrotu 90 stopni. Ciało i tagi HTML są do tej pory zamknięte. Tag stylu zawiera styl dla zarówno tagów „Div”, i.mi., Szerokość obu tagów Div wynosiłaby 210 pikseli, wysokość wynosiłaby 90 pikseli, żółty kolor tła z 2-pikselową stałą brązową granicą dla obu.
Następnie stosowaliśmy atrybut „Rotatez” właściwości transformacji w drugiej sekcji Div za pomocą identyfikatora tej sekcji, i.mi., "obracać się". Został użyty do obrócenia konkretnego Div na -9 -stopni, i.mi., w przeciwnym kierunku (z) powyższego przykładu. Właściwość koloru tła została ponownie użyta do zastąpienia ostatniego koloru tła dla tej konkretnej sekcji Div, i.mi., Będzie zielony, a nie żółty, z powodu nadrzędnego. Ten przykład został ukończony tutaj i jest gotowy do wykonania w przeglądarce Chrome.
Wyjście tego przykładu kodu HTML pokazano 1 nagłówek, 1 akapit i 2 sekcje DIV na ekranie przeglądarki Chrome. Jednocześnie pierwsza odcinek DIV o żółtym kolorze tła umieszczono w lewym do prawym kierunku bez obrotu 1 stopnia. Z drugiej strony, zielona sekcja div została obrócona -90 stopni po lewej stronie, przeciwnie do wyjścia prostych 90 stopni, które zostałyby umieszczone we właściwym kierunku strony HTML.
Przykład 03
Zróbmy nasz ostatni przykład tego artykułu, aby zademonstrować użycie prostej właściwości transformacji, aby obrócić niektóre elementy HTML do 90 stopni przy niewielkiej zmianie. W tym celu rozpoczęliśmy ten skrypt HTML od głównego znacznika HTML, a następnie znacznika głowy. Ten znacznik główny zawiera tytułowy znacznik do tytułu strony internetowej HTML jako „CSS obracają się do tej pory 90 stopni”.
Następnie mamy tag stylu, aby stylizować stronę internetową za pomocą różnych właściwości stylu CSS. Na razie musimy pominąć jego wyjaśnienie, ponieważ musimy spojrzeć na sekcję ciała tej strony HTML, zanim skakamy na stylizację. Tak więc sekcja ciała zawiera prosty nagłówek o rozmiarze 1, i.mi., Największy nagłówek HTML. Po tym nagłówku mamy normalną sekcję DIV, którą należy utworzyć na naszej stronie internetowej HTML i nie zostanie ona obrócona.
Następnie mamy kolejną sekcję DIV, do której należy użyć na stronie internetowej HTML, która zostanie obrócona o 90 stopni w odniesieniu do oryginalnego kierunku strony. Został przypisany do klasy „obracaj” do użytku w stylizacji. Następnie zmierzamy w kierunku wyjaśnienia tagu stylu, aby dodać stylizację do naszej strony HTML. Element „div” został tu używany do stylizacji. Ustawiamy wyrównanie lewej lub wyściółki zarówno dla znaczników na 50px, jak i górne wyrównanie lub wyściółkę na 150px. Pozycja obu sekcji DIV została ustawiona na absolutną. Szerokość i wysokość obu sekcji div jest również tym samym i.mi. Odpowiednio 200px i 100px.
Następnie wykorzystaliśmy klasę „obracaj” drugiej sekcji Div, aby stylizować ją również osobno. Ustawiamy kolor tła dla tej sekcji Div na przezroczystą, tj.mi., Zastąpienie powyższej właściwości koloru tła. Używamy nieruchomości zarysowej zamiast granicy, tj.mi., 5 -przerywany zarys 5 PX. Również właściwość transformacji jest tutaj, aby obrócić tę konkretną sekcję do 90 stopni. Uruchommy ten kod teraz.
Wyjście tego skryptu HTML pokazało nam dwa elementy Div na tej stronie; jeden z żółtych kolorów, a drugi jest przezroczysty. Żółta sekcja Div jest normalna w swojej pozycji i wcale nie jest obracana. Przezroczysta sekcja Div z przerywanym konturem jest obracany o 90 stopni.
Wniosek
W tym artykule pokazano zastosowanie właściwości transformacji CSS z różnymi metodami obracania dowolnego elementu HTML dowolnej strony do 90 stopni. W tym celu wypróbowaliśmy prosty atrybut obrotowy, aby obrócić element do 90 stopni i atrybut obrotowy, aby obrócić element do stopni „-90”, i.mi., przeciwnie do 90 stopni.