Skip to main content

CSS translate3d() Function – How to Reposition Elements Three-Dimensionally

translate3d() transforms an element by repositioning (translating) it three-dimensionally along the x-, y-, and z-axis.

Illustration of the 3D Cartesian coordinate system

A three-dimensional Cartesian coordinate system showing the X-, Y-, and Z-axis

Syntax of the CSS translate3d() Function​

translate3d() accepts three arguments. Here is the syntax:

element {
  transform: translate3d(x, y, z);
}

Note the following:

  • The x argument can be a length or percentage value. It specifies the distance you wish to move the element from its original x-axis position.
  • The y argument can be a length or percentage value. It defines the distance you wish to move the element from its original y-axis position.
  • z can only be a length—not a percentage. It defines the distance you wish to move the element from its original z-axis position.

Examples of the CSS translate3d() Function​

Below are some examples of how the CSS translate3d() function works.

How to translate an element along only the X-axis​

img {
  transform: translate3d(150px, 0, 0);
  width: 80%;
}

Try Editing It

The snippet above used the translate3d() function to reposition the image 150px away from its original position along the x-axis.

note

translate3d(150px, 0, 0) is equivalent to translateX(150px).

How to translate elements three-dimensionally​

img {
  width: 40%;
}

.second-image {
  transform: perspective(300px) translate3d(15%, 45%, 200px);
}

Try Editing It

The snippet above used the translate3d() function to reposition the image 15% away from its original position along the x-axis. 45% from its y-axis. And 200px from its z-axis.

CSS translate3d() Function vs. translate Property: What's the Difference?​

The CSS translate3d() function and the CSS translate property provide two similar ways to specify a translation transformation.

The main differences between the two translation techniques are as follows:

  • The CSS translate property allows translating an element without using the CSS transform property.
  • The CSS translate property's syntax is shorter than its function alternative.
  • The CSS translate property saves you from remembering the specific order to position the transform functions.
  • Browsers calculate the transform functions' matrix in the order you assigned them to the CSS transform property—from left to right.
  • Browsers calculate the transform properties' matrix in the following transformation matrix order:
    1. translate
    2. rotate
    3. scale
important

You must set a perspective property on the "parent element" of the element you want to translate. Otherwise, the element will not move along its z-axis.

Here's an example:

Use CSS translate property to translate an element three-dimensionally:

img {
  width: 40%;
}

div {
  perspective: 300px;
}

.second-image {
  translate: 50% 25% 200px; /* Equal to a transform: translate3d(50%, 25%, 200px) property */
}

Try Editing It

The snippet above used the translate property to reposition the image 50% away from its original position along the x-axis. 25% from its y-axis. And 200px from its z-axis.

note

A none value tells browsers not to translate the selected element.

Overview​

This article discussed what a CSS translate3d() function is. We also used examples to see how it works.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Tweet this article