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_value er bevegelse langs x-aksen. En positiv verdi flytter elementet til høyre, mens en negativ verdi flytter det til venstre;
  • Y_value er bevegelse langs y-aksen. En positiv verdi flytter elementet nedover, og en negativ verdi flytter det oppover;
  • Z_value er 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() og translateY() – 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:

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:

Du har sannsynligvis en 2D-skjerm slik som meg, og vi kan ikke merke forskyvningen langs z-aksen.