translate() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The translate() CSS function is used to move an element from its current position along the X, Y, and optionally Z axes. It is a part of the broader CSS transform property, which allows you to apply various transformations like rotation, scaling, and skewing. Unlike changing the top or left properties, which affects the layout and can trigger reflows, translate() is a performant way to reposition elements because it operates on the element’s rendering layer without affecting document flow.

This function accepts one or two parameters (for 2D translation) or three parameters (for 3D translation). For 2D translations, the first value moves the element along the X-axis (horizontal), and the second moves it along the Y-axis (vertical). If only one value is provided, it affects the X-axis, and the Y-axis is assumed to be zero. For 3D translations, a third value can be added to move the element along the Z-axis (depth), which can create a sense of perspective when combined with the perspective property. Values can be specified in length units (px, em, rem) or percentages, allowing relative positioning based on the element’s size.

An important feature of translate() is that it can be combined with other transform functions like rotate() or scale() to create complex animations or transitions. For example, you can smoothly move a div across the screen while simultaneously scaling or rotating it.

Example:

.box {
  transform: translate(50px, 100px);
  transition: transform 0.5s ease;
}
.box:hover {
  transform: translate(100px, 200px);
}

In this example, hovering over the element with the class .box will move it smoothly 100px to the right and 200px down from its original position, demonstrating how translate() can be used in combination with transition for interactive effects.

Because translate() doesn’t modify the surrounding layout, it is often preferred over positional properties when creating animations, slides, or parallax effects. It is widely supported across modern browsers, making it a reliable choice for both simple and complex visual transformations.

Syntax

transform: translate( tx [, ty ]? ); 

/* the question mark indicates the second value is optional */

Values

txHorizontal shift. A positive value shifts to the right, a negative value to the left.
tyVertical shift. A positive value moves up, a negative value down. If the value is not specified, then the default value is 0 and no vertical shift occurs.

Any unit of length accepted in CSS is accepted as values - for example, pixels (px), inches (in), points (pt), etc. One value moves an element only horizontally, two values move an element horizontally and vertically independently. A value of 0 does not change the position of the element.

Example

HTML

<div class="container">

  <div class="box original">Original Position</div>

  

  <div class="box moved">I am Translated!</div>

</div>

CSS

/* Basic styling for the boxes */

.box {

  width: 150px;

  height: 100px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 8px;

  color: white;

  font-family: sans-serif;

  font-weight: bold;

}



/* Gray box to show where it started */

.original {

  background-color: #ccc;

  border: 2px dashed #666;

}



/* The box being moved */

.moved {

  background-color: #3498db;

  /* translate(x-axis, y-axis) */

  transform: translate(50px, 20px);

  opacity: 0.9;

}



/* Optional: Center the container for viewing */

.container {

  padding: 50px;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS translate() function. Hover over a browser icon to see the version that first introduced support for this CSS function.