It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

The CSS Translate Property

Reading time 2 min
Published Aug 8, 2017
Updated Oct 1, 2019

An introduction to transform and translate

CSS transform is a powerful tranformation property. By using its various functions, you can scale, rotate, skew, or translate HTML elements. One of the most commonly used functions is CSS translate which allows you to move elements.

Using translate

CSS translate moves an element up and down or side-to-side:

  • By indicating one value, you move the element to the right side. Negative values move elements to the left.
  • The second value moves the element down. Negative values move elements up.

This example moves the element to the right and down by indicating two values in the transform: translate() CSS declaration:

Example
div {
  width: 80px;
  height: 80px;
  background-color: green;
}

.example1 {
  background-color: purple;
  color: white;
  border-radius: 5px;
  transform: translate(20px, 50px);
}

translateX and translateY

The CSS translateY and translateX properties are a bit more specific. The elements move along either the horizontal or vertical axis.

The following example shows the use of CSS translateY:

Example
div {
  width: 80px;
  height: 80px;
  background-color: green;
}

.example1 {
  transform: translateY(130px); 
  background-color: purple;
}

Creating 3D space

CSS 3D transforms happen when you apply a function that positions an element along the Z axis – e.g., the CSS translate3d method.

CSS translate3d or the translateZ function moves the element to 3D space. Positive values position elements closer to the viewer, while negative values move elements away (similar to zooming in and out):

Example
div {
  width: 100px;
  height: 100px;
  background-color: green;
}

.example1 {
  transform: perspective(500px) translate3d(50px, 10px, 3px);
  background-color: pink;
}

Browser support

Browser image
Chrome
36+
Browser image
Edge
12+
Browser image
Firefox
16+
Browser image
IE
10+
Browser image
Opera
23+
Browser image
Safari
9+

Mobile browser support

Browser image
Chrome
36+
Browser image
Firefox
16+
Browser image
Opera
24+
Browser image
Safari
9+