Normalt når tekst legges til en webside i en horisontal posisjon på skjermbildet. Imidlertid gir CSS forskjellige måter å endre tekstposisjonen i henhold til preferanser. Vi kan også endre retning og vinkel på teksten ved å bruke CSS -egenskaper. Mer spesifikt kan tekst roteres ved 90 grader.

Denne håndboken lærer deg hvordan du roterer tekst på 90 grader. Så la oss komme i gang!

Hvordan rotere tekst 90 grader i CSS?

For å rotere teksten på 90 grader i CSS, “forvandle”Eiendom brukes. Før du bruker den, vil vi for det første diskutere denne CSS -egenskapen for en bedre forståelse.

Hva er "transform" -egenskaper i CSS?

“forvandle”Eiendom brukes til 2D- og 3D -transformasjon av ethvert element. Denne egenskapen lar et element rotere, bevege seg, skjev og skala. Du kan også bruke denne egenskapen til å rotere den ekstra teksten på 90 grader.

Syntaks

Syntaks av “forvandle”Eiendom er:

Transform: Ingen | Transform-funksjoner

Beskrivelse av ovennevnte verdier er:

• ingen: Det brukes til å angi ingen transformasjon på noe element.
• Transformfunksjoner: Den kan brukes til å spesifisere forskjellige funksjoner, for eksempel roter (), skala (), flytt () og skjevhet ().

La oss flytte til det praktiske eksemplet for å bruke transformasjonseiendommen for roterende tekst i 90 grader.

Eksempel: roterende tekst 90 grader i CSS

I HTML vil vi legge til en overskrift og avsnitt ved hjelp av

og

Tag, henholdsvis:

Linuxhint

Rotasjon av tekst i 90 grader

Dette vil vise følgende utgang:

Nå vil vi flytte til CSS og bruke "forvandle”Eiendom til det. For å gjøre det, bruk "p”For å få tilgang til avsnittet som er opprettet i HTML -filen. Etter det, bruk transformasjonsegenskapen og sett rotasjonsvinkelen som "90deg”I Rotate () -funksjonen. Deretter, bruk "Transform-origin”Eiendom og setter verdien til”venstre”For å rotere teksten i urviseren. Dessuten satte vi margin-venstre "70px”For å gi margen fra venstre side av avsnittet, og for styling, sett fontvekt og fontstørrelse som“dristigere”Og“x-stor”, Henholdsvis:

P
Transform: roter (90deg);
Transform-origin: Venstre;
Margin-venstre: 70px;
Fontvekt: Bolder;
Font-størrelse: X-Large;

Merk: Her, "Transform-origin”Eiendom brukes til å sette x-aksen og y-aksen til rotasjon.

Etter implementeringen av ovennevnte kode, gå til HTML og utfør den for å se følgende utfall:

Det kan observeres at bruk av "forvandle”Eiendom, teksten vår roteres med 90 grader.

Konklusjon

For å rotere teksten på 90 grader, “forvandle”Eiendom brukes. Rotasjonsvinkelen settes i henhold til den spesifiserte gradverdien. Ved å bruke dette kan du også definere forskjellige vinkler i teksten i henhold til ditt valg. I denne artikkelen har vi forklart hvordan du roterer tekst 90 grader ved hjelp av transformasjonsegenskapen ved hjelp av et eksempel.