Mens du utvikler en webside, plasseres divs vanligvis horisontalt på skjermbildet som standard. Imidlertid gir CSS flere måter å omorganisere divene i henhold til preferanser. Du kan også endre orienteringen og vinkelen til DIV ved hjelp av CSS. I dette tilfellet er det mulig å rotere DIV i henhold til ønsket grad.

I denne guiden vil du spesifikt snakke om prosedyren for å rotere en div i en vinkel på 90 grader. Så la oss komme i gang!

Hvordan du roterer div 90 grader i CSS?

For å rotere div ved 90 grader i CSS “forvandle”Eiendom brukes. Som et første skritt vil vi diskutere transformasjonseiendommen slik at du bedre kan forstå hvordan det fungerer.

Hva er "transform" -egenskaper i CSS?

For transformasjon av et 2D- eller 3D -element, "forvandle”Eiendom til CSS brukes. Denne egenskapen lar et element rotere, bevege seg, skjev og skala.

Syntaks

Syntaksen til transformasjonseiendommen er:

Transform: Ingen | Transform-funksjoner

Her er beskrivelsen av ovennevnte verdier:

• ingen: Det brukes til å begrense transformasjonen av ethvert element.
• Transformfunksjoner: Det er forskjellige funksjoner som "rotere()”,“skala ()”,“bevege seg()”Og“skjev ()”Som kan spesifiseres.

La oss nå flytte til det praktiske eksemplet på å bruke transformasjonseiendommen for å rotere en DIV 90 grader i CSS.

Eksempel: Rotating a Div 90 grader ved hjelp av CSS “Transform” -egenskaper

Først av alt, i HTML, vil vi lage en overskrift ved hjelp av

Tag og en beholder med klassenavnet som "Div2”:

Roter div 90 grader:

Rotasjon av div

Deretter, i CSS, bruk "div”For å få tilgang til den opprettede beholderen i HTML -filen. Etter det, sett bredden og høyden på diven som “200px”Og“100px”, Sett bakgrunnsfargen på divet som“RGB (129, 129, 38)”. Dessuten vil vi sette grensen til div som “5px”Bredde,“fast”Type, og“rød”Farge:

div
Bredde: 200px;
Høyde: 100px;
Bakgrunn: RGB (129, 129, 38);
Border: 5px solid rød;

Utfallet av den gitte koden er:

Nå, bruk “forvandle”Eiendom og pass“90”Grader som et argument for Rotate () -funksjonen og transformasjon-opprinnelsen som“30%”:

Transform: roter (90deg);
Transform-origin: 30%;

Lagre den la til koden og åpne HTML -filen i nettleseren. Som et resultat vil du se at den ekstra diven roteres 90 grader:

Vi har samlet den enkleste metoden for å rotere en DIV 90 grader i CSS.

Konklusjon

For rotasjon av en div 90 grader i CSS, "forvandle”Eiendom kan brukes. Det brukes til transformasjon av 2D- eller 3D -elementer. I tillegg tillater denne egenskapen et HTML -element å roteres, spydde, skaleres og flyttes. Denne håndboken diskuterte prosedyren for å rotere en DIV 90 grader i CSS.