translateX() 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 translateX() CSS function allows you to move an element along the horizontal axis of its current position without affecting the layout of other elements. It is part of the transform property, which provides a powerful way to manipulate elements in 2D or 3D space. Unlike changing the left or margin-left properties, using translateX() does not trigger reflow, which can improve performance, especially in animations.

The value of translateX() can be specified in px, %, em, or other length units. Positive values move the element to the right, while negative values move it to the left. This function is often combined with translateY() in the transform property to move elements diagonally or in more complex animations.

For example, you can move a div element 50 pixels to the right:

div {
  transform: translateX(50px);
}

Using percentages, the movement is relative to the element’s own width:

div {
  transform: translateX(50%);
}

translateX() can also be animated with transition or animation to create smooth sliding effects. For instance:

div {
  transition: transform 0.3s ease-in-out;
}

div:hover {
  transform: translateX(100px);
}

This moves the element smoothly to the right when hovered, creating an interactive effect that is visually appealing and performance-friendly.

Syntax

transform: translate(tx);

Values

txHorizontal shift. A positive value shifts to the right, a negative value to the left.

Any length units accepted in CSS are accepted as values - for example, pixels (px), inches (in), points (pt), etc. A positive value shifts to the right, negative to the left. A value of 0 does not change the position of the element.

Example

HTML

<div class="container">

  <div class="moving-box">Hover Me!</div>

</div>

CSS

/* The area where the box lives */

.container {

  width: 100%;

  height: 200px;

  border: 2px dashed #ccc;

  display: flex;

  align-items: center;

  padding: 20px;

}



/* The element we are moving */

.moving-box {

  width: 120px;

  height: 120px;

  background-color: #3498db;

  color: white;

  display: flex;

  justify-content: center;

  align-items: center;

  font-weight: bold;

  border-radius: 8px;

  

  /* Smooths the movement */

  transition: transform 0.5s ease-in-out; 

}



/* When you hover over the box, move it 200 pixels to the right */

.moving-box:hover {

  transform: translateX(200px);

}

Result

Editor

Browser Support

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