CSS translate Property


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
Applies to
transformable elements
Computed value
as specified, but with relative lengths converted into absolute lengths
a transform
JavaScript syntax

Interactive Demo


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


  • 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.


<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>
.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;

Browser Support

The following table will show you the current browser support for the CSS translate property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 2nd January 2024