Hvordan bevege, rotere, skala og skjeve elementer i CSS?

Nettdesignere ønsker ofte å gjøre noen interessante ting med elementene som vises på nettstedet deres for å gjøre webdesign iøynefallende iøynefallende iøynefall. CSS Transform -egenskap lar deg bevege, rotere, skala og skjeve elementer enten langs x og y -akser eller langs x, y og z -akser. Denne egenskapen består av visse metoder som lar deg utføre disse oppgavene enkelt. Disse metodene er bredt klassifisert i to grupper som er som følger.

1. 2D -transformasjonsmetoder
2. 3D -transformasjonsmetoder

La oss lære dem i detalj.

2D -transformasjonsmetoder

For å bevege, rotere, skala og skjeve elementer langs x-aksen, og Y-aksen, gir CSS forskjellige metoder som faller inn under kategorien 2D-transformasjonsmetoder. Her har vi listet opp noen grunnleggende 2D -transformasjonsmetoder for deg.

1. oversette () -metode
2. Rotate () -metode
3. skala () -metode
4. skew () -metode
5. Matrix () -metode

Nedenfor har vi forklart disse metodene i detalj.

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)

TX- og TY -parametrene representerer x- og y -aksene.

Eksempel
Anta at du vil flytte et bilde til en viss posisjon ved hjelp av translate () -metoden. Her er den aktuelle koden.

Html

Uten oversettelse:

Med oversettelse:

Her har vi laget to divelementer og plassert et bilde i begge.

CSS

.div
Bredde: 50px;
Margin: 20px;

.oversette
Transform: Oversett (30px, 30px);

Bortsett fra å gi litt bredde og margin til Div -elementene, bruker vi Oversats () -metoden på det andre bildet.

Produksjon

Bildet er flyttet med suksess ved bruk av oversettelsesmetoden ().

Rotate () -metode

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

Syntaks

Transform: roter (rx, ry, grader)

Gradparameteren definerer vinkelen som elementet skal roteres.

Eksempel
Anta at du vil rotere en DIV-beholder både med klokken og mot klokken. Bruk Rotate () -metoden.

Html

Normal div container.


Roterte 30 grader med klokken.

R
Roterte 30 grader mot klokken.

For å demonstrere arbeidet med Rotate () -metoden er det blitt definert tre DIV -containere.

CSS

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

.med klokken
Transform: roter (30deg);

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

I koden ovenfor roterer vi den andre div 30 grader med klokken og den tredje div 30 grader mot klokken. Negative verdier brukes til å rotere et element mot klokken.

Produksjon

Rotate -metoden fungerer som den skal.

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)

X- og Y -aksene er definert av SX og SY -parameteren.

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

Html

Original størrelse på div container
Størrelsen på DIV -beholderen økes halvannen ganger med den opprinnelige bredden og høyden.

Vi har ganske enkelt laget to divelementer.

CSS

div
Bredde: 200px;
Høyde: 100px;
Margin: 50px;
Bakgrunnsfarge: Rosybrown;
Grense: 1px solid svart;

.skala
Transform: skala (1.5,1.5);

Vi bruker skalaen () -metoden for å øke bredden og høyden på elementet halvannen ganger den opprinnelige bredden og høyden.

Produksjon

Størrelsen på DIV -beholderen er skalert ved hjelp av skalaen () -metoden.

skew () -metode

Skew () -metoden skjev et element horisontalt (langs x-aksen) og vertikalt (langs y-aksen) basert på de angitte grader.

Syntaks

Transform: Skew (SX, SY)

Eller,

Transform: Skew (SX)

De to dimensjonene er representert av SX og SY -parametere.

Eksempel
Anta at du vil skjule et element både horisontalt og vertikalt og deretter vurdere eksemplet nedenfor.

Html

Original Div Container.


Denne DIV -beholderen er skjev 8 grader horisontalt, og 9 grader vertikalt.

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

CSS

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

.skjev
Transform: skew (8deg, 9deg);

Vi skjev den andre DIV-beholderen 8 grader langs x-aksen og 9 grader langs y-aksen.

Produksjon

Elementet var skjevt vellykket.

Matrix () -metode

For å oversette, rotere, skala og skjeve elementer på en gang brukes matrisen () -metoden.

Syntaks

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

Verdiene for respektive metoder kan tildeles som parametere.

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

Html

Original Div Container.


Etter å ha brukt den første matrisen () -metoden.


Etter å ha brukt den andre matrisen () -metoden.

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

CSS

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

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

.matrise2
Transform: Matrix (1, 0, 0.4, 1, 120, 0);

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

Produksjon

Matrix () -metoden fungerer som den skal.

Nå som vi har lært om 2D -transformasjonsmetodene, la oss utforske 3D -transformasjonsmetodene.

3D -transformasjonsmetoder

For å bevege, rotere og skalere og skjeve elementer langs x-aksen, Y-aksen og Z-aksen, gir CSS forskjellige metoder som blir referert til som 3D-transformasjonsmetoder. De grunnleggende 3D -transformasjonsmetodene er som følger

1. Translate3D () -metode
2. Rotate3D () -metode
3. Scale3D () -metode
4. Matrix3D () -metode

Vi har forklart disse metodene i detalj nedenfor.

Translate3D () -metode

Metoden som brukes til å endre plasseringen av et element langs x-, y- og z -aksene basert på de tilordnede parametrene blir referert til som Translate3D () -metoden.

Syntaks

Transform: Translate3D (TX, TY, TZ)

De tre dimensjonene er representert av TX-, TY- og TZ -parametrene.

Eksempel
Anta at du vil endre plasseringen av et bilde langs alle de tre aksene. Bruk metoden Translate3D ().

Html

Uten oversettelse:

Med oversettelse:

Samme bilde er plassert i begge beholderne for å demonstrere før og etter virkningen av translate3d () -metoden.

CSS

.div
Bredde: 50px;
Margin: 20px;

.oversette
Transform: translate3d (25px, 25px, 40px);

Vi bruker Translate3D () -metoden for å endre plasseringen av Second Div Container.

Produksjon

Bildet er oversatt ved bruk av Translate3D () -metoden.

Rotate3D () -metode

For å rotere et element med klokken eller mot klokken langs x-, y- og z-aksene basert på den spesifiserte graden, brukes ROTATE () -metoden.

Syntaks

Transform: Rotate3D (RX, RY, RZ, grader)

Rx-, RY- og RZ -parametrene definerer de tre dimensjonene, mens graderparameteren spesifiserer vinkelen som elementet skal roteres.

Eksempel
Anta at du vil rotere et bilde i 3D -rommet.

CSS

.div
Bredde: 200px;
Margin: 30px;
Perspektiv: 300px;

.rotere
Transform: Rotate3D (0, 1, 0, 45deg);

Vi roterer den andre DIV -beholderen ved å spesifisere verdiene til x-, y- og z -aksene og vinkelen. Merk at vi også har satt perspektivegenskapen til 300px, som definerer perspektivvisningen til et element.

Produksjon

Bildet er rotert med suksess.

Scale3D () -metode

For å forbedre eller redusere størrelsen på et element basert på den spesifiserte bredden og høyden, brukes skalaen () metoden. For at denne metoden skal fungere, bruk den sammen med andre transformasjonsmetoder som roter og perspektiv.

Syntaks

Transform: Scale3D (SX, SY, SZ)

Ovennevnte parametere spesifiserer de tre dimensjonene.

Eksempel
La oss se hva som skjer med det samme bildet som brukes i eksemplet ovenfor når du bruker SCALE3D () -metoden.

CSS

.div
Bredde: 300px;
Margin: 30px;
Perspektiv: 300px;

.skala
Transform: Scale3D (1, 1, 1) Rotate3d (1, 0, 0, 60deg);

Som allerede nevnt, må vi bruke Scale3D () -metoden med andre metoder for å se dens virkning, og i koden ovenfor bruker vi den sammen med Rotate3D () -metoden.

Produksjon

SCALE3D () -metoden er bekreftet og fungerer som den skal.

Matrix3D () -metode

For å oversette, rotere og skalere elementer på en gang i 3D -rommet, brukes Matrix () -metoden. Denne metoden gjengir 16 verdier i form av en 4 × 4 -matrise.

Syntaks

Transform: Matrix3d ​​(M, M, M, M, M, M, M, M, M, M, M, M, M, M, M, M, M)

Eller,

Transform: Matrix3d ​​(Translate3D (), Rotate3D (), Scale3D ())

Hver parameter tar inn verdien av den respektive metoden.

Eksempel
La oss oversette, rotere og skalere hundebildet på en gang ved hjelp av Matrix3D () -metoden.

CSS

.matrise
Transform: Translate3D (10px, 10px, 20px) Rotate3d (0, 1, 0, -60deg) Scale3D (1, 1, 1);

Bildet blir oversatt, rotert og skalert samtidig.

Produksjon

Bildet er flyttet, rotert og skalert på en gang.

Konklusjon

For å flytte, rotere, skalere og skjule et element er det forskjellige metoder tilgjengelig i CSS som faller inn under kategoriene 2D -transformasjonsmetoder og 3D -transformasjonsmetoder. Metodene translate (), roter (), skala (), skew () og matrix () er gruppert under klassifisering 2D -transformasjonsmetoder, i mellomtiden, metoder translate3d (), roTate3d (), skala3d () og matrix3d ​​() ligge i gruppen av 3D -transformasjonsmetoder. Alle disse metodene blir forklart i detalj i denne guiden sammen med relevante eksempler.