CSS roterer topp 10 grader
Eksempel 01
La oss komme i gang med å demonstrere hvordan et element av HTML kan roteres 90 grader. Dette eksemplet er initialisert med den viktigste “HTML” -koden etterfulgt av “Head” -merket tittelen vår HTML -webside med “CSS Rotate 90 grader” i “tittelen” -taggen. Kroppselementet i denne HTML -koden er initialisert med overskriften i størrelse 1, i.e., den største overskriften til HTML. Det er bare en enkel overskrift uten rotasjon i det hele tatt. Deretter har vi en "div" -seksjon som også vil bli plassert normalt på HTML -websiden uten noen rotasjon.
En annen "div" -seksjon har blitt brukt her med den spesifiserte klassen "rotert". Begge DIV -seksjonene inneholder noen tekst i dem, men den andre "Div" -delen vil bli rotert på skjermen mens den første vil forbli normal. "Body" -elementet er nå lukket, og vi er her på "stil" -merket for å style denne HTML -siden. Både "div" -seksjonene har blitt stylet med 100 piksler bredde og høyde, med litt bakgrunnshimmelfarge. Etter det ble klassen "rotert" brukt til å style den andre diven til 90 grader ved å bruke "transform" -egenskapen til CSS med den røde bakgrunnsfargen. På grunn av bruk av bakgrunnsfarge på den andre "div" med sin klasse, vil den andre fargen overstyre den første fargen på denne spesifikke div -delen. La oss lagre denne koden og kjøre den ved hjelp av Visual Studio -koden "Kjør" -menyen.
Vi har fått den nedenfor-stilte utgangen for dette HTML-skriptet. Den første div plasseres normalt på nettleserskjermen uten rotasjon. Mens den andre "div" roteres 90 grader i henhold til retning og plassering av teksten ved å bruke "transform" -attributtet til CSS, i.e., topp til bunn.
Eksempel 02
Innenfor dette eksemplet vil vi bruke "rotere" metoden for transformasjonsattributt i stedet for den enkle "rotere" -metoden for å rotere et spesifikt element i HTML -skriptet. Denne gangen har vi igjen brukt de samme HTML- og "Head" -kodene etter den samme "tittelen". Kroppsområdet har blitt initialisert med den enkle overskriften i størrelse 1 etter en enkel avsnittsmerke som inneholder en tekstlinje i den. Det har blitt initialisert en normal DIV -seksjon på HTML -siden, og viser at det ikke vil bli brukt noen rotasjon på den.
En annen "Div" -seksjon er blitt initialisert med sin ID "Rotate", og den vil inneholde en lang setning som forklarer at roteringsfunksjonen har blitt brukt på denne DIV for rotasjon på 90 grader. Kroppen og HTML -kodene er stengt så langt. Stilmerket inneholder stylingen for begge “div” -merker, i.e., Bredden på begge DIV-tagger ville være 210 piksler, høyden ville være 90 piksler, gul bakgrunnsfarge med en 2 piksler solid brun kant for begge.
Etter dette har vi brukt "Rotatez" -attributtet til Transform -egenskapen på den andre div -delen ved å bruke IDen til denne delen, i.e., "rotere". Det har blitt brukt til å rotere den spesielle diven til -9- grader, jeg.e., i motsatt retning (z) av ovennevnte eksempelutgang. Bakgrunnsfargeegenskapen har blitt brukt igjen for å overstyre den siste stilede bakgrunnsfargen for denne spesifikke div -delen, i.e., Det vil være grønt, ikke gult, på grunn av overordnede. Dette eksemplet er fullført her og er klart for utførelse i Chrome -nettleseren.
Utgangen fra dette HTML -kodeeksemplet har vist 1 overskrift, 1 avsnitt og 2 DIV -seksjoner på Chrome Browser -skjermen. Samtidig har den første div-delen av gul bakgrunnsfarge blitt plassert i venstre til høyre retning uten en 1-graders rotasjon. På den annen side har den grønne DIV -delen blitt rotert -90 grader til venstre, motsatt av utgangen av enkle 90 grader som vil bli plassert i høyre retning av en HTML -side.
Eksempel 03
La oss ha vårt siste eksempel på denne artikkelen for å demonstrere bruken av en enkel transformasjonseiendom for å rotere noen HTML -elementer til 90 grader med litt endring. For dette har vi startet dette HTML -skriptet med HTML -hovedmerket etterfulgt av Head -taggen. Denne hodemerket inneholder en tittelkode til tittel HTML -websiden da "CSS roterer 90 grader" så langt igjen.
Etter dette har vi en stilkode for å style websiden ved å bruke forskjellige CSS -stilegenskaper. Foreløpig må vi hoppe over forklaringen fordi vi må se på kroppsdelen på denne HTML -websiden før vi hopper på stylingen. Så kroppsdelen inneholder en enkel overskrift av størrelse 1, i.e., den største overskriften til HTML. Etter denne overskriften har vi en normal DIV -seksjon som skal opprettes på HTML -nettsiden vår, og den vil ikke roteres.
Etter det har vi en annen DIV -seksjon som skal brukes på HTML -nettsiden som vil bli rotert 90 grader angående sidens opprinnelige retning. Den er tildelt med klassen "roter" for bruk i stylingen. Etter dette har vi beveget oss mot forklaringen av stilmerket for å legge til litt styling på HTML -siden vår. "Div" -elementet har blitt brukt her for styling. Vi har satt til venstre-justering eller polstring for både taggene til 50px og toppjustering eller polstring til 150px. Posisjonen for begge div -seksjonene er satt til absolutt. Bredden og høyden på begge DIV -seksjonene er også den samme jeg.e. Henholdsvis 200px og 100px.
Etter dette har vi brukt klassen "rotere" av den andre div -delen for å style den separat også. Vi har satt bakgrunnsfargen for denne div -seksjonen til gjennomsiktig, jeg.e., Overstyrer den ovennevnte bakgrunnsfargede egenskapen. Vi har brukt omrissegenskapen i stedet for grensen, jeg.e., en 5 px stiplet disposisjon. Transformegenskapen er også her for å rotere denne delen til 90 grader. La oss kjøre denne koden nå.
Utgangen for dette HTML -skriptet har vist oss to divelementer på denne siden; en av gul farge, og den andre er gjennomsiktig. Den gule div -delen er normal i sin posisjon og ikke rotert i det hele tatt. Den gjennomsiktige Div -delen med en stiplet disposisjon roteres 90 grader.
Konklusjon
Denne artikkelen demonstrerte bruken av transformasjonsegenskapen til CSS med forskjellige metoder for å rotere ethvert HTML -element på en hvilken som helst webside til 90 grader. For dette har vi prøvd en enkel roteringsattributt for å rotere et element til 90 grader og Rotatez-attributtet til å rotere et element til “-90” grader, i.e., motsatt av 90 grader.