3D -transformasjonsmetoder i CSS

For å sørge for at webdesignet ditt er enestående og sikrer å forbedre brukeropplevelsen, må du lære hvordan du angir forskjellige HTML -elementer på websiden din. Det er mange ting du kan gjøre med elementer for å forbedre utseendet deres, for eksempel å oversette, rotere eller skala elementer i enten 2D- eller 3D -plassen.

CSS gir forskjellige transformasjonsmetoder som enten faller i kategorien 2D -transformasjonsmetode eller 3D -transformasjonsmetoder. I dette innlegget vil vi imidlertid se 3D -transformasjonsmetodene i CSS.

3D -transformasjonsmetoder i CSS

Det er forskjellige 3D -transformasjonsmetoder i CSS; Noen av de grunnleggende metodene er som følger.

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

Ovennevnte metoder er forklart i detalj nedenfor.

Translate3D () -metode

CSS Translate3D () -metoden endrer plasseringen av et element langs x-, y- og z -aksene basert på de tilordnede parametrene.

Syntaks

Transform: Translate3D (TX, TY, TZ)

Parametrene TX, TY og TZ representerer x-, y- og z -aksene.

Eksempel
Anta at du vil endre plasseringen av et bilde i 3D -dimensjonen ved å bruke metoden Translate3D (), og følg deretter eksemplet nedenfor.

Html

Uten oversettelse:

Med oversettelse:

I koden ovenfor har vi opprettet to DIV -elementer og plassert det samme bildet i begge beholderne for å demonstrere før og etter effekt av Translate3D () -metoden.

CSS

.div
Bredde: 200px;
Høyde: 100px;
Margin: 30px;

.oversette
Transform: translate3d (30px, 30px, 50px);

Først gir vi DIV -beholderen litt bredde, høyde og margin. Etterpå bruker vi Translate3D () -metoden for å endre plasseringen av Second Div Container.

Produksjon

Bildets plassering er endret vellykket ved bruk av translate3d () -metoden.

Rotate3D () -metode

For å rotere et element med klokken eller mot klokken i 3D-rommet basert på den angitte graden, brukes ROTATE () -metoden.

Syntaks

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

Parametrene Rx, Ry og RZ definerer de tre dimensjonene, mens graderparameteren spesifiserer vinkelen som elementet skal roteres.

Eksempel
For å demonstrere arbeidet med Rotate3D () -metoden skal vi bruke eksemplet som brukes i ovennevnte avsnitt I.e. Vi kommer til å rotere hundebildet langs x-, y- og z -aksene.

CSS

.div
Bredde: 200px;
Høyde: 100px;
Margin: 30px;
Perspektiv: 300px;

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

Bortsett fra å sette bredde, høyde og margin på DIV -elementet, justerer vi også perspektivet. Perspektivegenskapen definerer perspektivvisningen til et element i 3D -dimensjonen. Til slutt roterer vi den andre DIV -beholderen ved å spesifisere verdiene til x-, y- og z -aksene og vinkelen.

Produksjon

Bildet er rotert med suksess i 3D -dimensjonen.

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)

X-, Y- og Z -aksene er representert av SX-, SY- og SZ -parametere.

Eksempel
La oss se hva som skjer med hundebildet når du bruker skalaen () -metoden.

CSS

.div
Bredde: 300px;
Høyde: 80px;
Margin: 30px;
Perspektiv: 300px;

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

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

Hundebildet er skalert.

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 ())

Verdiene for forskjellige metoder kan tilordnes de tilsvarende parametrene.

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, -45deg) Scale3D (1, 1, 1);

Vi beveger oss, roterer og skalerer bildet på en gang.

Produksjon

Matrix3D () -metoden fungerer som den skal.

Andre 3D -transformasjonsmetoder er blitt forklart i følgende tabell.

Metode	Beskrivelse
translatex (x) metode	Endrer plasseringen av et element langs x-aksen.
Translatey (Y) -metode	Endrer plasseringen av et element langs y-aksen
Translatez (z) -metode	Endrer plasseringen av et element langs z-aksen
Rotatex (x) -metode	Roterer et element langs x-aksen.
Rotatey (Y) -metode	Roterer et element over y-aksen.
Rotatez (Z) -metode	Roterer et element langs z-aksen.
SCALEX (X) -metode	Skalerer elementet over x-aksen.
Scaley (Y) -metode	Skalerer elementet over y-aksen.
Scalez (z) -metode	Skalerer et element langs z-aksen.
perspektiv (n) metode	Den definerer perspektivvisningen til et element i 3D -rom.

Konklusjon

For å plassere, rotere og skalere elementer langs x-, y- og z -aksene er det forskjellige 3D -transformasjonsmetoder tilgjengelig i CSS. De grunnleggende 3D -transformasjonsmetodene i CSS er Translate3D (), Scale3D (), Rotate3D () og Matrix3D (). Translate3D () -metoden brukes til å endre plasseringen av et element, Rotate3D () -metoden brukes til å rotere et element i 3D -dimensjonen, skalaen () -metoden brukes til å endre størrelsen på et element, og Matrix3D () metoden brukes til å utføre alle disse oppgavene samtidig. Alle disse metodene blir forklart inngående sammen med relevante eksempler i denne guiden.