translate3d() CSS Function

Description

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.

Syntax

transform: translate3d( tx, ty, tz);

Values

• 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.

Example

<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.

Desktop
12	12	10	15	4

Tablets / Mobile
18	10	14	3.2	1	3

Last updated by CSSPortal on: 7th October 2023