Oversetting av elementer for dynamiske effekter
translate() og translateZ() gjør det mulig å flytte et element fra sin opprinnelige posisjon i en bestemt retning relativt til sin nåværende posisjon. Disse funksjonene er en del av CSS transform-egenskapen. I tillegg kan vi bruke translateX() og translateY() for å flytte et element kun horisontalt eller vertikalt.
transform: translate(X_value, Y_value, Z_value);
transform: translateX(value);
transform: translateY(value);
transform: translateZ(value);
translate()– aksepterer opptil 3 verdier;X_valueer bevegelse langs x-aksen. En positiv verdi flytter elementet til høyre, mens en negativ verdi flytter det til venstre;Y_valueer bevegelse langs y-aksen. En positiv verdi flytter elementet nedover, og en negativ verdi flytter det oppover;Z_valueer bevegelse langs z-aksen. En positiv verdi flytter elementet nærmere betrakteren, og en negativ verdi flytter det lenger bort. Hvis du kun angir 1 eller 2 verdier, bruker nettleseren samme verdi(er) for de manglende aksene.
translateX()ogtranslateY()– aksepterer 1 verdi hver;translateX(value)angir horisontal bevegelse. En positiv verdi flytter elementet til høyre, og en negativ verdi flytter det til venstre;translateY(value)angir vertikal bevegelse. En positiv verdi flytter elementet nedover, og en negativ verdi flytter det oppover.
translateZ()– aksepterer 1 verdi. Den angir bevegelse langs z-aksen, noe som kan skape 3D-transformasjoner. En positiv verdi flytter elementet nærmere betrakteren, og en negativ verdi flytter det lenger bort.
La oss se hva vi kan oppnå ved hjelp av disse funksjonene:
index.html
index.css
translate3d()-egenskapen
Det er også mulig å legge til 3D-forskyvning av elementer ved hjelp av én egenskap. Vanligvis har brukere 2D-skjermer, og denne 3D-bevegelsen vil derfor være usynlig. Samtidig prøver stadig flere brukere å oppleve 3D-virkelighet. Snart vil de fleste brukere ha skjermer med tre dimensjoner, og denne egenskapen vil da være nyttig. Syntaksen er som følger:
transform: translate3d(X_value, Y_value, Z-value);
Forskyvning langs z-aksen legges til som siste verdi. En positiv verdi gir bevegelse fremover mot brukeren. En negativ verdi gir bevegelse bakover, vekk fra brukeren.
Se eksempelet:
index.html
index.css
Du har sannsynligvis en 2D-skjerm slik som meg, og vi kan ikke merke forskyvningen langs z-aksen.
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Can you show an example of how translate3d() works in CSS?
What are some practical uses for translateZ() or translate3d() today?
How does translate3d() differ from using translate() with three values?
Awesome!
Completion rate improved to 2.04
Oversetting av elementer for dynamiske effekter
Sveip for å vise menyen
translate() og translateZ() gjør det mulig å flytte et element fra sin opprinnelige posisjon i en bestemt retning relativt til sin nåværende posisjon. Disse funksjonene er en del av CSS transform-egenskapen. I tillegg kan vi bruke translateX() og translateY() for å flytte et element kun horisontalt eller vertikalt.
transform: translate(X_value, Y_value, Z_value);
transform: translateX(value);
transform: translateY(value);
transform: translateZ(value);
translate()– aksepterer opptil 3 verdier;X_valueer bevegelse langs x-aksen. En positiv verdi flytter elementet til høyre, mens en negativ verdi flytter det til venstre;Y_valueer bevegelse langs y-aksen. En positiv verdi flytter elementet nedover, og en negativ verdi flytter det oppover;Z_valueer bevegelse langs z-aksen. En positiv verdi flytter elementet nærmere betrakteren, og en negativ verdi flytter det lenger bort. Hvis du kun angir 1 eller 2 verdier, bruker nettleseren samme verdi(er) for de manglende aksene.
translateX()ogtranslateY()– aksepterer 1 verdi hver;translateX(value)angir horisontal bevegelse. En positiv verdi flytter elementet til høyre, og en negativ verdi flytter det til venstre;translateY(value)angir vertikal bevegelse. En positiv verdi flytter elementet nedover, og en negativ verdi flytter det oppover.
translateZ()– aksepterer 1 verdi. Den angir bevegelse langs z-aksen, noe som kan skape 3D-transformasjoner. En positiv verdi flytter elementet nærmere betrakteren, og en negativ verdi flytter det lenger bort.
La oss se hva vi kan oppnå ved hjelp av disse funksjonene:
index.html
index.css
translate3d()-egenskapen
Det er også mulig å legge til 3D-forskyvning av elementer ved hjelp av én egenskap. Vanligvis har brukere 2D-skjermer, og denne 3D-bevegelsen vil derfor være usynlig. Samtidig prøver stadig flere brukere å oppleve 3D-virkelighet. Snart vil de fleste brukere ha skjermer med tre dimensjoner, og denne egenskapen vil da være nyttig. Syntaksen er som følger:
transform: translate3d(X_value, Y_value, Z-value);
Forskyvning langs z-aksen legges til som siste verdi. En positiv verdi gir bevegelse fremover mot brukeren. En negativ verdi gir bevegelse bakover, vekk fra brukeren.
Se eksempelet:
index.html
index.css
Du har sannsynligvis en 2D-skjerm slik som meg, og vi kan ikke merke forskyvningen langs z-aksen.
Takk for tilbakemeldingene dine!