translate

An individual transform property that moves an element in 2D or 3D space without needing the shorthand transform property.

It is documented as part of the CSS Transforms specification.

/* Usage Example */
.slide-in {
  translate: -100% 0;
  /* moves the element entirely off-screen to the left */
}

/* Syntax */
translate: none;

/* Global values */
translate: inherit;
translate: initial;
translate: revert;
translate: revert-layer;
translate: unset;
Widely available Since 2022 94% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.

104+
72+
14.1+
104+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC