translate() og translateZ() gør det muligt at flytte et element fra dets oprindelige position i en bestemt retning i forhold til dets nuværende position. Disse funktioner er en del af CSS transform-egenskaben. Derudover kan vi bruge translateX() og translateY() til kun at flytte et element horisontalt eller vertikalt.

transform: translate(X_value, Y_value, Z_value);
transform: translateX(value);
transform: translateY(value);
transform: translateZ(value);

• translate() – accepterer op til 3 værdier;
  • X_value er bevægelsen langs x-aksen. En positiv værdi flytter elementet til højre, mens en negativ værdi flytter det til venstre;
  • Y_value er bevægelsen langs y-aksen. En positiv værdi flytter elementet nedad, og en negativ værdi flytter det opad;
  • Z_value er bevægelsen langs z-aksen. En positiv værdi flytter elementet tættere på brugeren, og en negativ værdi flytter det længere væk. Hvis du kun angiver 1 eller 2 værdier, anvender browseren de samme værdier for de manglende akser.
• translateX() og translateY() – accepterer hver 1 værdi;
  • translateX(value) angiver horisontal bevægelse. En positiv værdi flytter elementet til højre, og en negativ værdi flytter det til venstre;
  • translateY(value) angiver vertikal bevægelse. En positiv værdi flytter elementet nedad, og en negativ værdi flytter det opad.
• translateZ() – accepterer 1 værdi. Den angiver bevægelse langs z-aksen, hvilket kan skabe 3D-transformationer. En positiv værdi flytter elementet tættere på brugeren, og en negativ værdi flytter det længere væk.

Lad os se, hvad vi kan opnå ved hjælp af disse funktioner:

translate3d()-egenskab

Det er også muligt at tilføje 3D-forskydning af elementer ved hjælp af én egenskab. Dog har brugere generelt 2D-skærme, og denne 3D-bevægelse vil derfor være usynlig. Samtidig forsøger flere og flere brugere at opleve 3D-virkelighed. Snart vil de fleste brugere have skærme med tre dimensioner, og denne egenskab vil blive nyttig. Syntaksen er følgende:

transform: translate3d(X_value, Y_value, Z-value);

Z-aksens forskydning tilføjes som den sidste værdi. En positiv værdi betyder bevægelse fremad mod brugeren. En negativ værdi betyder bevægelse bagud væk fra brugeren.

Se eksemplet:

Du har sandsynligvis en 2D-skærm ligesom mig, og vi kan ikke bemærke forskydningen langs z-aksen.