2D -transformasjonsmetoder i CSS

Når du designer et nettsted er det ofte påkrevd å plassere, rotere, skala eller skjule HTML -elementer horisontalt og vertikalt for å forbedre oversettet til nettstedet. For dette formålet kan vi bruke CSS Transform -egenskapen som lar oss endre posisjon, størrelse eller form på et element. I CSS er det to typer transformasjoner som er 2D -transformasjon og 3D -transformasjon.

I denne guiden kommer vi imidlertid til å holde oss til 2D -transformasjonen og lære om de forskjellige 2D -transformasjonsmetodene.

2D -transformasjonsmetoder i CSS

Det er forskjellige 2D -transformasjonsmetoder i CSS som er som følger.

1. oversette () -metode
2. Rotate () -metode
3. skala () -metode
4. SCALEX () -metode
5. Scaley () -metode
6. skew () -metode
7. skewx () -metode
8. Skewy () -metode
9. Matrix () -metode

Disse blir forklart i detalj nedenfor.

oversette () -metode

CSS translate () -metoden endrer plasseringen av et element langs x-aksen (horisontalt) eller langs y-aksen (vertikalt) basert på parametrene som er tilordnet.

Syntaks

Transform: Translate (TX, TY)

Eller,

Transform: Translate (TX)

TX, og TY refererer til x- og y -aksene.

Eksempel
Anta at du vil flytte et bilde til en viss posisjon ved hjelp av oversettelsesmetoden () og følg eksemplet nedenfor.

Html

CSS

IMG
Bredde: 250px;
Høyde: 100px;
Transform: Oversett (50px, 50px);

Produksjon
Uten å oversette () metode.

Med oversett () -metode.

Translate () -metoden har oversatt bildet 50px fra toppen og 5-px fra venstre side med suksess.

Rotate () -metode

For å rotere et element med klokken eller mot klokken basert på den spesifiserte graden, brukes ROTATE () -metoden.

Syntaks

Transform: Rotate (grader)

Gradparameteren definerer vinkelen som elementet skal roteres.

Eksempel
Tenk på eksemplet nedenfor for å forstå arbeidet med Rotate () -metoden.

Html

Dette er en normal div -beholder.


Denne DIV -beholderen roteres 25 grader med klokken.


Denne DIV-beholderen roteres 25 grader mot klokken.

Her har vi spesifisert tre DIV -containere for å demonstrere konseptet med Rotate () -metoden.

CSS

div
Bredde: 250px;
Høyde: 100px;
Bakgrunnsfarge: Bisque;
Grense: 1px fast grått;

.med klokken
Transform: roter (25deg);

.mot klokka
Transform: roter (-25deg);

I koden ovenfor gir vi først bredde, høyde, bakgrunnsfarge og grense til DIV -containerne. Etterpå roterer vi den andre div 25 grader med klokken og den tredje div 25 grader mot klokken. Merk at for å rotere mot klokken bruker vi negative verdier.

Produksjon

Rotate () -metoden er implementert og bekreftet.

skala () -metode

For å forbedre eller redusere størrelsen på et element basert på den spesifiserte bredden, og høyden brukes skalaen () metoden.

Syntaks

Transform: Skala (SX, SY)

Eller,

Transform: skala (SX)

SX, og SY representerer henholdsvis de horisontale og vertikale dimensjonene.

Eksempel
Eksemplet nedenfor viser arbeidet med skalaen () -metoden.

Html

Størrelsen på DIV -beholderen økes to ganger med den opprinnelige bredden og høyden.

I koden ovenfor har vi ganske enkelt opprettet et DIV -element.

CSS

div
Bredde: 200px;
Høyde: 100px;
Margin: 130px;
Bakgrunnsfarge: Bisque;
Grense: 1px solid svart;
Transform: skala (2,2);

Ved hjelp av CSS -egenskaper tildeler vi litt bredde, høyde og margin til DIV -elementet, og til slutt bruker vi skalaen () -metoden for å øke bredden og høyden på elementet dobbelt så høyt som den opprinnelige bredden og høyden.

Produksjon

Størrelsen på DIV -beholderen ble økt ved bruk av skalaen () -metoden.

SCALEX () -metode

For å endre bredden på et element, brukes Scalex () -metoden.

Syntaks

Transform: Scalex (SX)

SX -parameteren representerer den horisontale dimensjonen til et element.

Eksempel
La oss si at du vil redusere bredden på et element, og ta kontakt med eksemplet nedenfor.

CSS

div
Transform: Scalex (0.5);

I koden ovenfor bruker vi SCALEX () -metoden for å redusere bredden på en DIV -beholder.

Produksjon

SCALEX () -metoden fungerer som den skal.

Scaley () -metode

For å endre høyden på et element, brukes Scaley () -metoden.

Syntaks

Transform: Scaley (SY)

SY-parameteren definerer verdien av y-aksen.

Eksempel

Tenk på eksemplet nedenfor.

CSS

div
Transform: Scaley (2);

Her bruker vi Scaley () -metoden for å øke høyden på DIV -elementet.

Produksjon

Høyden på DIV -elementet er økt to ganger sin opprinnelige høyde.

skew () -metode

Denne metoden skjev et element horisontalt og vertikalt basert på de spesifiserte grader.

Syntaks

Transform: Skew (SX, SY)

Eller,

Transform: Skew (SX)

SX, og SY representerer x- og y -aksene.

Eksempel
Anta at du ønsker å skjule et element langs x- og y -aksene ..

Html

Dette er en normal div -beholder.


Denne DIV -beholderen er skjev 10 grader horisontalt, og 15 grader vertikalt.

Her har vi definert to DIV -containere for å demonstrere arbeidet med skew () -metoden.

CSS

div
Bredde: 200px;
Høyde: 100px;
Bakgrunnsfarge: Bisque;
Grense: 1px fast grått;

.skjev
Transform: skew (10deg, 15deg);

Bortsett fra å style DIV-containerne er vi skjevt den andre DIV-beholderen 10 grader langs x-aksen og 15 grader langs y-aksen.

Produksjon

DIV -beholderen er skjev horisontalt og vertikalt.

skewx () -metode

For å skjule et bestemt element horisontalt basert på de spesifiserte grader, brukes Skewx () -metoden.

Syntaks

Transform: Skew (SX)

SX-parameteren definerer x-aksen.

Eksempel
Anta at du vil skjule et element 15 grader horisontalt.

CSS

.skjev
Transform: skewx (15deg);

Ved hjelp av Skewx () -metoden er vi skjevt Div -elementet 15 grader horisontalt.

Produksjon

SCALEX () -metoden fungerer som den skal.

Skewy () -metode

For å skjule et bestemt element vertikalt basert på de spesifiserte grader, brukes den skeive () metoden.

Syntaks

Transform: Skew (SY)

SY-parameteren definerer y-aksen.

Eksempel
Anta at du vil skjule et element 15 grader vertikalt.

CSS

.skjev
Transform: Skewy (15deg);

Ved hjelp av Skewx () -metoden er vi skjevt Div -elementet 15 grader vertikalt.

Produksjon

Scaley () -metoden fungerer som den skal.

Matrix () -metode

For å oversette, rotere, skalere og skjule elementer på en gang brukes matrisen () metoden.

Syntaks

Transform: Matrix (Scalex (), Skewy (), Skewx (), Scaley (), Translatex (), Translate ())

Du kan tilordne verdier til alle egenskapene som skiller dem komma.

Eksempel

La oss forstå arbeidet med Matrix () -metoden ved å bruke følgende eksempel.

Html

Dette er en normal div -beholder.


DIV -beholderen etter å ha brukt Matrix () -metoden.


DIV -beholderen etter å ha brukt Matrix () -metoden.

For å demonstrere arbeidet med Matrix () -metoden har vi laget tre divelementer.

CSS

div
Bredde: 200px;
Høyde: 100px;
Bakgrunnsfarge: Bisque;
Grense: 1px fast grått;

.matrise1
Transform: Matrix (1, -0.3, 0, 1, 0, 0);

.matrise2
Transform: Matrix (1, 0, 0.5, 1, 150, 0);

Vi tildeler forskjellige verdier til forskjellige parametere for Matrix () -metoden.

Produksjon

Matrix -metoden fungerer som den skal.

Konklusjon

For å plassere, rotere, skalere eller skjeve elementer langs x- og y -aksen er det forskjellige 2D -transformasjonsmetoder tilgjengelig i CSS. De grunnleggende 2D -transformasjonsmetodene i CSS er oversette (), rotere (), skala (), skew () og matrise (). Hver av disse metodene tjener et annet formål som vi har forklart i denne artikkelen sammen med relevant eksempel.