Translate

translate() and translateZ() allows us to move an element from its original position in a specific direction relative to its current position. These functions are part of the CSS transform property. Additionally, we can use translateX() and translateY() to move an element only horizontally or vertically.

• translate() - accepts up to 3 values;
  • X_value is the movement along the x-axis. A positive value moves the element to the right, while a negative value moves it to the left;
  • Y_value is the movement along the y-axis. A positive value moves the element to the bottom, and a negative value moves it to the top;
  • Z_value is the movement along the z-axis. A positive value moves the element closer to the viewer, and a negative value moves it farther away. If you specify only 1 or 2 values, the browser applies the same value(s) for the missing axis/axes.
• translateX() and translateY() - accept 1 value each;
  • translateX(value) specifies horizontal movement. A positive value moves the element to the right, and a negative value moves it to the left;
  • translateY(value) specifies vertical movement. A positive value moves the element to the bottom, and a negative value moves it to the top.
• translateZ() - accepts 1 value. It specifies movement along the z-axis, which can create 3D transformations. A positive value moves the element closer to the viewer, and a negative value moves it farther away.

Let's check what we can achieve with the help of these functions:

translate3d() property

We also can add 3d element displacement with the help of one property. However, generally, users have 2d screens, and this 3d movement will be invisible. At the same time, more and more users are trying to feel 3d reality. So soon, most users will have 3 dimensions screens, and this property will be helpful. The syntax is following:

We add the z-axis displacement as the last value. A positive value is a movement in the direction forward the user. A negative value is a movement in the direction backward the user.

Let's check the example:

You likely have a 2d screen the same as me, and we can not notice the displacement along the z-axis.