Skip to main content

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.

Illustration of the 2D Cartesian coordinate system

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​

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

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​

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

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

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

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

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:

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

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.

Overview​

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