translate() och translateZ() gör det möjligt att flytta ett element från dess ursprungliga position i en specifik riktning relativt dess nuvarande position. Dessa funktioner är en del av CSS-egenskapen transform. Dessutom kan vi använda translateX() och translateY() för att endast flytta ett element horisontellt eller vertikalt.

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

• translate() – accepterar upp till 3 värden;
  • X_value är förflyttningen längs x-axeln. Ett positivt värde flyttar elementet åt höger, medan ett negativt värde flyttar det åt vänster;
  • Y_value är förflyttningen längs y-axeln. Ett positivt värde flyttar elementet nedåt, och ett negativt värde flyttar det uppåt;
  • Z_value är förflyttningen längs z-axeln. Ett positivt värde flyttar elementet närmare betraktaren, och ett negativt värde flyttar det längre bort. Om du anger endast 1 eller 2 värden, tillämpar webbläsaren samma värde(n) för den saknade axeln/axlarna.
• translateX() och translateY() – accepterar 1 värde vardera;
  • translateX(value) anger horisontell förflyttning. Ett positivt värde flyttar elementet åt höger, och ett negativt värde flyttar det åt vänster;
  • translateY(value) anger vertikal förflyttning. Ett positivt värde flyttar elementet nedåt, och ett negativt värde flyttar det uppåt.
• translateZ() – accepterar 1 värde. Det anger förflyttning längs z-axeln, vilket kan skapa 3D-transformationer. Ett positivt värde flyttar elementet närmare betraktaren, och ett negativt värde flyttar det längre bort.

Låt oss se vad vi kan åstadkomma med hjälp av dessa funktioner:

translate3d()-egenskapen

Vi kan också lägga till 3D-förflyttning av element med hjälp av en enda egenskap. Vanligtvis har användare dock 2D-skärmar, och denna 3D-rörelse kommer att vara osynlig. Samtidigt försöker allt fler användare uppleva 3D-verklighet. Snart kommer de flesta användare att ha skärmar med tre dimensioner, och denna egenskap blir användbar. Syntaxen är följande:

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

Vi lägger till förskjutning längs z-axeln som det sista värdet. Ett positivt värde innebär en rörelse framåt mot användaren. Ett negativt värde innebär en rörelse bakåt från användaren.

Låt oss titta på exemplet:

Du har troligtvis en 2D-skärm precis som jag, och vi kan inte märka någon förflyttning längs z-axeln.