CSS translate() Function – How to Reposition Elements in CSS

translate() transforms an element by repositioning (translating) it two-dimensionally.

Syntax of the CSS translate() Function

translate() accepts two arguments. Here is the syntax:

element {
  transform: translate(x, y);
}

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.
• y is an optional argument.

A two-dimensional Cartesian coordinate system showing the X- and Y-axis

Examples of the CSS translate() Function

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

How to translate an element along only the X-axis

CSS

img {
  transform: translate(150px);
  width: 80%;
}

HTML

<img
  src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
  alt=""
/>

Try Editing It

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

Note

translate(150px) is equivalent to translateX(150px).

How to translate an element along only the Y-axis

CSS

img {
  transform: translate(0, 55%);
  width: 80%;
}

HTML

<img
  src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
  alt=""
/>

Try Editing It

The snippet above used the translate() function to reposition the image 55% away from its original position along the y-axis.

Note

• A zero (0) translate distance tells browsers not to apply any translating effect on the selected element.
• translate(0, 55%) is equivalent to translateY(55%).

CodeSweetly ads

How to translate an element along the X- and Y-axis

CSS

img {
  transform: translate(60%, 300px);
  width: 80%;
}

HTML

<img
  src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
  alt=""
/>

Try Editing It

The snippet above used the translate() function to reposition the image 60% away from its original position along the x-axis. And 300px from its y-axis.

CSS translate() Function vs. translate Property: What’s the Difference?

The CSS translate() 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

Here’s an example:

Use CSS translate property to translate an element along the X- and Y-axis:

CSS

img {
  translate: 60% 300px; /* Equal to a transform: translate(60%, 300px) property */
  width: 80%;
}

HTML

<img
  src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
  alt=""
/>

Try Editing It

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

Note

• A none value tells browsers not to translate the selected element.
• Providing a single value tells browsers to translate along only the x-axis. For example, translate: 30% will reposition the selected element 30% from its original position along only the x-axis.
• Use a translate: 0 30% syntax to translate along only the y-axis.