🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

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);
}

DataCamp
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
Udacity
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
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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+