translate3d() CSS Function


The CSS translate3d() function is used to move an element in three-dimensional space. It takes three parameters: tx, ty, and tz, which represent the translation along the x-axis, y-axis, and z-axis, respectively. The values of these parameters can be specified in pixels, percentages, or any other valid CSS unit.

The translate3d() function is often used to create animations and effects that appear to have depth. For example, you could use it to move an element towards or away from the user, or to create a carousel effect.

Here is an example of how to use the translate3d() function:

.element {
  transform: translate3d(100px, 50px, 0);

This CSS will move the element 100 pixels to the right, 50 pixels down, and 0 pixels forward.

You can also use the translate3d() function to move an element relative to its current position. For example, the following CSS would move the element 10 pixels to the right and 5 pixels down:

.element {
  transform: translate3d(10px, 5px, 0);

The translate3d() function is a powerful tool for creating three-dimensional effects in CSS. It can be used to create simple animations, such as moving an element towards or away from the user, or more complex effects, such as carousels and rotating objects.

Here are some examples of how the translate3d() function can be used:

  • Create a carousel effect by moving a list of elements one at a time.
  • Create a parallax effect by moving different elements at different speeds.
  • Create a 3D cube by rotating a square element on the x, y, and z axes.
  • Create a 3D pyramid by rotating a triangle element on the x, y, and z axes.


transform: translate3d( tx, ty, tz);


  • txHorizontal shift. A positive value shifts to the right, a negative value to the left.
  • tyVertical shift. A positive value moves up, a negative value down.
  • tzA positive value moves the element towards the viewer, and a negative value farther away.
Any length units accepted in CSS are accepted as values ​​- for example, pixels (px), inches (in), points (pt), etc. A positive value shifts forward, a negative one backwards. A value of 0 does not change the position of the element.


<img class="translate" src="images/nature.jpg" alt="Nature Image">
.translate {
transform: perspective(200px) translate3d(40px, 40px, 40px);

Browser Support

The following table will show you the current browser support for the CSS translate3d() function.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 7th October 2023