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 specifies the distance you wish to move the element from its original y-axis position.
  • z can only be a length—not a percentage. It specifies 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.

Buy CSS Flexbox book

How to translate an element along only the X-axis

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

Try it on StackBlitz

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 it on StackBlitz

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.

Overview

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