The CSS Translate Property

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:

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

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

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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:

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):

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

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

Browser support

Chrome

36+

Edge

12+

Firefox

16+

IE

10+

Opera

23+

Safari

9+

Mobile browser support

Chrome

36+

Firefox

16+

Opera

24+

Safari

9+