Translate | CSS-Tricks

CSS Almanac → Properties → T → translate

Joel Olawanle on Nov 9, 2021 (Updated on Nov 28, 2022)

The translate CSS property allows you to transfer an element from one place to another along the X (horizontal) axis, the Y (vertical) axis, and the Z (depth) axes, similar to how you might think of moving an element using offsets, like top, bottom, left, and right.

.element {
  translate: 100px;
}

The translate property works exactly the same as the translate() function that’s used with the transform property,

.element {
  transform: translate(100px);
}

The difference being that the translate() function does not support the three-dimensional Z-axis.

Syntax

translate: none | <length-percentage> [ <length-percentage> <length>? ]?;

…where <length-percentage> can either be a length value or percentage value. When it comes to writing values, translate can take one, two, or three values in a single declaration.

/* Keyword value */
translate: none;

/* Single value */
translate: 100px;
translate: 50%;

/* Two values */
translate: 100px 200px;
translate: 50% 105px;

/* Three values */
translate: 50% 105px 5rem;

/* Global values */
translate: inherit;
translate: initial;
translate: revert;
translate: unset;

Declaring one value translates the element along just the X-axis. Declaring two values sets the X and Y axes independently. Declaring three values sets the X, Y, and Z axes, respectively.

Initial: none
Applies to: transformable elements
Inherited: no
Percentages: refer to the size of bounding box
Computed value: as specified, but with relative lengths converted into absolute lengths
Animation type: a transform
Creates stacking context: yes

Values

none: This is used to specify that no translation should be applied.
<length-percentage>: This is a numerical value that determines how much an element is translated along an axis.

When we make use of a percentage value in translate property, that percentage refers to the element’s size, rather than the available space within the parent container.

`translate` does not change affect layout flow

It is important to know that the translate property does not cause other elements to flow around it, which is different than what we expect when using a transform, i.e. transform:translate()). Notice below that when the box translates, it does not distort or affect its surrounding elements.

Transitions and animations

We can use translate in CSS transitions and animations. That means we can transition from one place to another, say, when the element is hovered.

Or, we can combine rotate with individual transforms in a CSS animation using @keyframes to make even more interesting effects:

If you look at the browser support closely, you may want to consider a fallback solution that works with other browsers until translate property gets full browser support. The transform property is a viable fallback alternative for an independent transform property, such as rotate.

For example, we could drop the rotate animation into an @supports block. This way, the animation only runs if the browser supports the translate property:

/* Using transform by default */
@keyframes loader {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(100% 50%);
  }
}

/* Use translate instead, but only if it is supported */
@supports (translate: 0deg) {
  @keyframes loader {
    0% {
      translate: 0;
    }
    100% {
      translate: 100% 50%;
    }
  }
}