translate

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

Quick example

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

Quick facts

Initial value
none
Inherited
No
Applies to
transformable elements
Animation type
transform

Values

none

translate Browser Support

Widely availableSince 202394% global usage

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

Safe to use without fallbacks.

19+
111+
6+
79+
ESC