CSS Transform Translate | Forklart

Mens de utvikler enhver applikasjon, må utviklerne holde nettsteddesignet og interaktivt nettsted. For å gjøre det, kan flere CSS -egenskaper brukes, for eksempel overgang, animasjon og mange flere. Mer spesifikt, “forvandle”Eiendom plasserer elementet på x-aksen, y-aksen og z-aksen.

Denne oppskrivningen vil forklare CSS Transform-egenskapen med verdien Translate () -funksjonen.

Eksempel scenario

For demonstrasjonen vil vi lage to bilder stablet over hverandre. Den første vil være statisk og litt ugjennomsiktig, mens den andre kommer til å være bevegelig. Dessuten "forvandle”Eiendom brukes på det andre elementet slik at det beveger seg i forhold til det ugjennomsiktige bildet.

Trinn 1: Legg til bilder i HTML

I HTML, først, lage et DIV -element med klassenavnet “hovedinnhold”. Innenfor dette divelementet, legg til en annen div med klassenavnet “MOVE-IMG”. Inne i dette DIV -elementet, legg til to elementer, som hver har attributter:

• “src”Attributt spesifiserer bildebanen.
• “klasse”Attributts verdi legges til for å få tilgang til det aktuelle elementet i CSS.
• “alt”Angir teksten som vises hvis bildet ikke klarer å laste opp.
• “bredde”Eiendom definerer bredden på det ekstra HTML -elementet.

Her er HTML -koden:

Trinn 2: Bruke CSS

La oss gå videre for å bruke CSS -stylingegenskaper på HTML -elementene.

Stil "kropp" -element

kropp
Bakgrunnsfarge: #B4CDE6;

“bakgrunnsfarge”Eiendom brukes for å stille bakgrunnsfargen på kroppselementet.

Stil “move-img” div

.MOVE-IMG
Posisjon: relativ;
Bredde: 300px;
Margin: Auto;
Margin-top: 40px;

“MOVE-IMG”DIV -element brukes med følgende CSS -egenskaper:

• “posisjon”Eiendom med verdien”slektning”Setter elementets posisjon i forhold til dens normale stilling.
• “bredde”Eiendom setter elementets bredde.
• “margin”Eiendom brukes til å stille inn elementets høyde.
• “margin-topp”Eiendom spesifiserer plass øverst i elementets innhold.

Stil “img-1” div

.IMG-1
Posisjon: Absolutt;
Opacitet: 0.12;

“IMG-1”Div er stylet som følger:

• “posisjon”Eiendom med verdien”Absolutt”Vil plassere elementet i forhold til det nærmeste plasserte overordnede elementet.
• “Opacitet”Angir elementets åpenhet.

Stil “img-2” div

.IMG-2
Posisjon: Absolutt;

På samme måte har vi plassert "IMG-2”Div.

Produksjon

Hvordan transformere objektets plassering i HTML?

“forvandle”Eiendom tillater oss å rotere, skjev, skala eller oversette et element. Mer spesielt, "oversette()”Funksjonen justerer elementets posisjon på x-, y- og z-aksen. Funksjonaliteten til “oversette”Eiendom er den samme som for translate () -funksjonen som brukes med transformasjonseiendommen.

Hva er de forskjellige "transformasjons" egenskapsverdiene?

Det er flere oversettelsesverdier som er assosiert med CSS Transform -egenskapen:

• oversette()
• Translatex ()
• Translatey ()
• Translatez ()
• Translate3D ()

Sjekk ut det oppgitte eksemplet for å forstå bruken av dem!

Eksempel 1: Bruke “Oversett ()” med “Transform” -egenskaper

“oversette()”Funksjon tar to parameterverdier. Den første representerer verdien av x-aksen, og den andre verdien representerer y-aksen:

Transform: Oversett (100px, 100px);

Det kan observeres at i henhold til de spesifiserte verdiene blir elementet plassert horisontalt og vertikalt:

Eksempel 2: Bruke “Translatex ()” med “Transform” -egenskaper

For å flytte objektet horisontalt, bruk "Translatex ()”Funksjon. Som et resultat vil den positive verdien flytte objektet til høyre side, og den negative verdien vil flytte objektet til venstre side:

Transform: Translatex (100px);

Det kan observeres at objektet er blitt flyttet 100px til høyre:

Eksempel 3: Bruke “Translatey ()” med “Transform” -egenskaper

For å flytte objektet vertikalt, bruk "Translatey ()”Funksjon. I henhold til parametrene vil den positive verdien bevege objektet mot bunnen, og den negative verdien vil bevege den mot toppen:

Transform: Translatey (90px);

Produksjon

Eksempel 4: Bruke “Translatez ()” med “Transform” -egenskaper

Translatex () og Translatey () er ganske enkle å forstå når de transformerer elementene når det gjelder henholdsvis x-aksen og y-aksen. “Translatez ()”Funksjonen er på en eller annen måte vanskelig. X-aksen og y-aksen beveger elementet horisontalt eller vertikalt, mens z-aksen flytter objektet nærmere eller langt fra deg.

Passerende positiv verdi som TranslateZ () funksjonsparameter

Du kan bruke TranslateZ () -funksjonen som følger:

Transform: Perspective (200px) Translatez (50px);

Her:

• “perspektiv()”: Denne funksjonen definerer et virtuelt rom mellom skjermen og HTML -elementet.
• “Translatez ()”: Denne positive verdien i denne funksjonen flytter elementet nærmere deg, mens den negative verdien beveger elementet bort fra deg.

Det kan observeres at nå kommer bildet nærmere skjermen og ser større ut:

Passerende negativ verdi som TranslateZ () funksjonsparameter

La oss nå spesifisere den negative verdien som parameter for TranslateZ () -funksjonen:

Transform: Perspective (200px) Translatez (-50px);

Den negative verdien flyttet elementet langt fra oss:

Flytte objekt i 3D-retningen

For å flytte objektet i en 3-D-retning, bruk "Translate3D ()”Funksjon. Det tar verdien som x-aksen, y-aksen og z-aksen parametere. Dessuten "perspektiv()”Verdi spesifiserer mellomrom mellom elementet og skjermen slik at bildet kan bevege seg i et 3D-plan:

Transform: Perspective (500px) Translate3D (150px, 30px, 130px);

Utgangen representerer objektets bevegelse i 3-D:

Det handlet om CSS Transform Property med Translate () -funksjonen i CSS.

Konklusjon

CSS “forvandle”Eiendom med verdien”oversette()”Plasserte elementene på x-aksen, y-aksen og z-aksen. Disse verdiene kan være positive eller negative. “Translatex ()”Og“Translatey ()”Funksjoner plasserte objektene horisontalt og vertikalt. “Translatez ()”Funksjonen beveger objektet nærmere eller bort fra skjermen. Det er kombinert med "perspektiv()”Funksjon, som spesifiserer et mellomrom mellom skjermen og elementet. Denne artikkelen har demonstrert CSS Transform -egenskapen med Translate () -funksjonen.