CSS translate Property

Description

The translate CSS property is used to move an element from its current position along the X and Y axes. It can be used to create a variety of effects, such as animating elements, positioning elements relative to other elements, and creating slideshows. The translate property takes two values: the distance to move the element along the X axis and the distance to move the element along the Y axis. The values can be specified in pixels, percentages, or other valid CSS units.

Initial value: none
Applies to: transformable elements
Inherited: no
Computed value: as specified, but with relative lengths converted into absolute lengths
Animatable: a transform
JavaScript syntax: object.style.translate

Interactive Demo

Syntax

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

Values

noneSpecifies that no translation should be applied.
Single <length-percentage> valueA <length> or <percentage> that specifies a translation along the X-axis. Equivalent to a translate() (2D translation) function with a single value specified.
Two <length-percentage> valuesTwo <length> or <percentage> that specify the X and Y axis translation values (respectively) of a 2D translation. Equivalent to a translate() (2D translation) function with two values specified.
Three valuesTwo <length-percentage> and single <length> values that specify the X, Y, and Z axis translation values (respectively) of a 3D translation. Equivalent to a translate3d() (3D translation) function.

Example

HTML

<p>Hover over areas below</p>

<div class="wrapper">

  <div id="box1">translate X</div>

  <div id="box2">translate X,Y</div>

  <div id="box3">translate X,Y,Z</div>

</div>

CSS

.wrapper {
  perspective: 100px;
  display: inline-flex;
  gap: 1em;
}
.wrapper > div {
  width: 7em;
  line-height: 7em;
  text-align: center;
  transition: 0.5s ease-in-out;
  border: 2px solid blue;
  background: #fff;
}
#box1:hover {
  translate: 20px;
}

#box2:hover {
  translate: 20px 20px;
}

#box3:hover {
  translate: 5px 5px 30px;
}

Result

Editor