translate() en translateZ() maken het mogelijk om een element te verplaatsen vanaf zijn oorspronkelijke positie in een specifieke richting ten opzichte van de huidige positie. Deze functies zijn onderdeel van de CSS transform-eigenschap. Daarnaast kunnen we translateX() en translateY() gebruiken om een element alleen horizontaal of verticaal te verplaatsen.

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

• translate() - accepteert maximaal 3 waarden;
  • X_value is de verplaatsing langs de x-as. Een positieve waarde verplaatst het element naar rechts, terwijl een negatieve waarde het naar links verplaatst;
  • Y_value is de verplaatsing langs de y-as. Een positieve waarde verplaatst het element naar beneden, en een negatieve waarde naar boven;
  • Z_value is de verplaatsing langs de z-as. Een positieve waarde verplaatst het element dichter bij de kijker, en een negatieve waarde verder weg. Als je slechts 1 of 2 waarden opgeeft, past de browser dezelfde waarde(n) toe voor de ontbrekende as/assen.
• translateX() en translateY() - accepteren elk 1 waarde;
  • translateX(value) specificeert horizontale verplaatsing. Een positieve waarde verplaatst het element naar rechts, en een negatieve waarde naar links;
  • translateY(value) specificeert verticale verplaatsing. Een positieve waarde verplaatst het element naar beneden, en een negatieve waarde naar boven.
• translateZ() - accepteert 1 waarde. Dit specificeert verplaatsing langs de z-as, wat 3D-transformaties kan creëren. Een positieve waarde verplaatst het element dichter bij de kijker, en een negatieve waarde verder weg.

Laten we bekijken wat we met behulp van deze functies kunnen bereiken:

translate3d() eigenschap

We kunnen ook 3D-verplaatsing van een element toevoegen met behulp van één eigenschap. Over het algemeen beschikken gebruikers echter over 2D-schermen, waardoor deze 3D-beweging onzichtbaar blijft. Tegelijkertijd proberen steeds meer gebruikers een 3D-realiteit te ervaren. Binnenkort zullen de meeste gebruikers waarschijnlijk schermen met drie dimensies hebben, waardoor deze eigenschap nuttig wordt. De syntax is als volgt:

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

We voegen de verplaatsing langs de z-as toe als laatste waarde. Een positieve waarde betekent een beweging naar voren richting de gebruiker. Een negatieve waarde betekent een beweging naar achteren, van de gebruiker af.

Bekijk het volgende voorbeeld:

Je hebt waarschijnlijk net als ik een 2D-scherm, waardoor we de verplaatsing langs de z-as niet kunnen waarnemen.