CSS translate – Complete Guide

In this blog, we will talk about CSS translate, the property, not the function translate() used with the transform property. The working of the CSS translate property is quite similar to using offsets on an element like top, right. bottom, and left.

.box {{
translate: 2rem;
}
Code language: JavaScript (javascript)

You can use the translate property to move the element horizontally, i.e., on the X-axis, vertically, i.e., on the Y-axis, or give it a depth on the Z-axis.
The translate property functions identically to the translate() method, which is used with the transform property.

.box {
  transform: translate(2rem);
}
Code language: JavaScript (javascript)

The only difference is that the translate() function does not support the translation of the three-dimensional Z-axis (depth}.

Syntax

translate: none | "length-percentage" [ <length-percentage> <length>? ]?;
Code language: JavaScript (javascript)

Here, the “length-percentage” can either be a normal length value or a percentage value. The translate property can take up to three values in a single declaration.

Single Value

translate: 2rem;
translate: 30%;
Code language: JavaScript (javascript)

Declaring just one value will translate the element to both the X and Y axes with the same value.

Two Values

translate: 2rem 4rem;
translate: 50% 100px;
Code language: JavaScript (javascript)

Declaring two values will set the values for the X and Y axes independently.

Three Values

translate: 50% 100px 1rem;
Code language: JavaScript (javascript)

Declaring three values will set the values for the X, Y, and Z axes individually.

Values

none: This value will specify that no translation should occur on that specific element.
“length-percentage”: This is a numerical or percentage value that will determine how much the element should translate with respect to the particular axes.

It is important to understand that the translate property does not affect other components to flow around it, which is contrary to what we would expect when applying a transform (translate: translate()).

Transitions and Animations

CSS translate may also be used in CSS animations and transitions. That is, we can move the targetted element from one location to another, for example, when the element is hovered upon. To create even more fascinating effects, we can combine other specific transformations in a CSS animation using @keyframes.
If you carefully study the browser support, you should have a backup strategy that works with other browsers until the translate feature is completely supported. The transform property can be used as a backup for an independent transform property.
For example, we might include the translate function within a @supports block. Only if the browser supports the translate function will the animation play:

@keyframes loading {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(50% 50%);
  }
}
@supports (translate: 0deg) {
  @keyframes loading {
    0% {
      translate: 0;
    }
    100% {
      translate: 50% 50%;
    }
  }
}
Code language: CSS (css)

Browser Support

Conclusion

The CSS translate property is quite similar to the translate() function but not supported yet by many browsers (at the time of writing this article) as mentioned above. You can use the transform: translate() as it has the same functionalities.