Skip to content
CodeSweetly Logo CodeSweetly Logo CodeSweetly
Blog
Latest: JSX in React explained clearly without any framework

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.

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.

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.

Support CodeSweetly