CSS translateX() Function

CSS translateX() Function

The CSS translateX() function moves an element horizontally along the X axis without changing its original position in the document layout.

It is used with the transform property and accepts a length or percentage value. Positive values move an element to the right, while negative values move it to the left in the normal, unrotated coordinate system.

Syntax

translateX(tx)

The translateX() function requires one length or percentage value that determines horizontal movement.

Examples:

transform: translateX(50px);
transform: translateX(-30px);
transform: translateX(50%);
transform: translateX(-50%);
transform: translateX(2rem);
transform: translateX(10vw);
transform: translateX(0);

The function is used as a value of the transform property:

.box {
  transform: translateX(50px);
}

This moves the box 50px horizontally to the right.

Unlike the individual translate property, translateX() is a transform function rather than a standalone CSS property.

Parameters

The translateX() function accepts exactly one argument.

Accepted values include absolute lengths, relative lengths, percentages, and compatible CSS calculations.

For example:

translateX(40px)
translateX(2em)
translateX(3rem)
translateX(25%)
translateX(calc(100% - 20px))
translateX(var(--offset, 0px))

Unitless zero is valid, but nonzero unitless numbers are not.

For example, translateX(20) is invalid because it does not specify a length unit.

How It Works

The translateX() function changes the rendered horizontal position of an element without changing its original position in normal document flow.

For example:

.box {
  transform: translateX(60px);
}

The element appears 60px to the right of its original position.

However, the browser still reserves the original layout space for the element.

Neighboring elements generally remain in their original positions, even if the translated element overlaps them.

Translation is represented by a transformation matrix. The horizontal translation value changes the X coordinate without directly changing the Y coordinate.

The function can also be animated using CSS transitions or keyframe animations.

Positive and Negative Values

The sign of the translation value determines the direction of horizontal movement in the normal coordinate system.

Positive Values

.box {
  transform: translateX(50px);
}

Moves the element 50px to the right.

Negative Values

.box {
  transform: translateX(-50px);
}

Moves the element 50px to the left.

Zero

.box {
  transform: translateX(0);
}

Applies no horizontal displacement.

The X axis follows the transform coordinate system rather than the text direction. A positive translation normally moves to the right even when the element uses direction: rtl.

When translateX() is combined with rotations, the final visual direction may change.

Length Values

Length values move an element horizontally by a distance expressed in CSS units.

Pixels

.box {
  transform: translateX(40px);
}

Moves the element 40px to the right.

Font-Relative Units

.box {
  transform: translateX(2rem);
}

The movement is based on the root element's font size.

.box {
  transform: translateX(2em);
}

The movement is based on the element's computed font size.

Viewport Units

.box {
  transform: translateX(10vw);
}

The element moves horizontally by 10% of the viewport width.

Calculated Values

.box {
  transform: translateX(calc(20px + 1rem));
}

The movement is calculated from the combined length values.

Use lengths when the horizontal movement should be based on a specific CSS distance rather than the element's own width.

Percentage Values

Percentage values in translateX() are resolved relative to the width of the element's transform reference box.

The reference box is controlled by transform-box. For ordinary HTML elements, it is typically the border box.

For example:

.box {
  width: 200px;
  transform: translateX(50%);
}

Assuming the element's border box is 200px wide, the translation distance is 100px.

Similarly:

.box {
  width: 200px;
  transform: translateX(-50%);
}

This moves the element 100px to the left.

A translation of 100% moves the element horizontally by the full width of its transform reference box.

Unlike percentage values used with some positioning properties, the percentage is not based on the parent container's width.

This behavior makes percentage translation useful for centering, sliding panels, and movement relative to an element's own dimensions.

Comparing Translation Functions

CSS provides several related translation functions for moving elements along different axes.

The following declarations produce equivalent horizontal translations:

transform: translateX(40px);
transform: translate(40px, 0);
transform: translate3d(40px, 0, 0);

Use translateX() when only horizontal movement is required.

For movement along multiple axes, use translate() or translate3d().

Combining Transform Functions

The translateX() function can be combined with other transform functions, including rotate(), scale(), and skew().

For example:

.box {
  transform: translateX(50px) rotate(20deg);
}

This combines horizontal translation with rotation.

The order of the functions affects the final transformation.

Compare:

transform: translateX(100px) rotate(45deg);
transform: rotate(45deg) translateX(100px);

In the first declaration, the element rotates and then moves horizontally along the original X axis.

In the second declaration, the horizontal translation is affected by the rotation.

Transform functions are composed in their written order, with their effects applied from right to left.

When multiple transforms are used, their order should be chosen according to the intended movement and orientation.

Transform Origin

The transform-origin property determines the point around which transformations such as rotation and scaling are applied.

Changing the transform origin does not change the distance produced by translateX() when translation is the only transform.

For example:

.box {
  transform-origin: top left;
  transform: translateX(50px);
}

The element still moves 50px horizontally.

However, when translation is combined with rotation or scaling, the transform origin can affect the final visual position.

.box {
  transform-origin: top left;
  transform: translateX(50px) rotate(30deg);
}

Here, the rotation uses the top-left transform origin rather than the default center.

CSS Custom Properties

CSS custom properties can store horizontal translation distances for reuse.

For example:

.box {
  --move-x: 40px;
  transform: translateX(var(--move-x));
}

Changing --move-x changes the horizontal translation.

A fallback can also be supplied:

.box {
  transform: translateX(var(--move-x, 0px));
}

If --move-x is not defined, the translation defaults to zero.

Custom properties are useful for reusable animations, hover effects, and responsive components.

Example

The following example compares positive and negative horizontal translations.

HTML:

<div class="translatex-demo">
  <div class="translatex-row">
    <div class="translatex-box">Original</div>
  </div>
  <div class="translatex-row">
    <div class="translatex-box translatex-right">Right 50px</div>
  </div>
  <div class="translatex-row">
    <div class="translatex-box translatex-left">Left 50px</div>
  </div>
</div>

CSS:

.translatex-demo {
  display: grid;
  gap: 15px;
}
.translatex-row {
  padding: 10px 70px;
  background-color: #f1f3f5;
}
.translatex-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 55px;
  color: #fff;
  background-color: #3498db;
}
.translatex-right {
  background-color: #16a085;
  transform: translateX(50px);
}
.translatex-left {
  background-color: #8e44ad;
  transform: translateX(-50px);
}

The blue box remains at its original horizontal position.

The green box moves 50px to the right, while the purple box moves 50px to the left.

All three boxes retain their original layout positions within their rows.

Percentage Translation Example

The following example demonstrates how percentage translations depend on an element's own width.

HTML:

<div class="translatex-percent-demo">
  <div class="translatex-percent-box">translateX(50%)</div>
</div>

CSS:

.translatex-percent-demo {
  padding: 20px;
  background-color: #f1f3f5;
}
.translatex-percent-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 65px;
  color: #fff;
  background-color: #8e44ad;
  transform: translateX(50%);
}

The box is 180px wide, so translateX(50%) moves it 90px to the right.

The percentage is based on the box's transform reference width rather than the width of the parent container.

Horizontal Centering Example

The translateX() function can be combined with absolute positioning to center an element horizontally.

HTML:

<div class="translatex-center-demo">
  <div class="translatex-center-box">Centered</div>
</div>

CSS:

.translatex-center-demo {
  position: relative;
  height: 130px;
  background-color: #f1f3f5;
}
.translatex-center-box {
  position: absolute;
  top: 30px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 65px;
  color: #fff;
  background-color: #2e86c1;
  transform: translateX(-50%);
}

The left: 50% declaration positions the element's left edge at the horizontal center of its containing block.

The translateX(-50%) function then moves the element left by half its own width.

This centers the element horizontally, even when its width changes.

Flexbox and Grid provide alternative centering methods without absolute positioning.

Transition Example

The translateX() function can create horizontal movement effects using CSS transitions.

HTML:

<button class="translatex-button" type="button">
  Hover or Focus
</button>

CSS:

.translatex-button {
  padding: 15px 25px;
  border: none;
  color: #fff;
  background-color: #3498db;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.translatex-button:hover,
.translatex-button:focus-visible {
  transform: translateX(20px);
  background-color: #2471a3;
}
.translatex-button:focus-visible {
  outline: 3px solid #f39c12;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .translatex-button {
    transition: none;
  }
}

When hovered or focused, the button moves 20px to the right.

The transition animates the horizontal movement and background-color change.

Users who prefer reduced motion receive the state change without the animated transition.

Common Uses

The translateX() function is useful when an element needs to move horizontally without changing the surrounding layout.

• Horizontal positioning: Apply visual offsets along the X axis.
• Centering: Combine left: 50% with translateX(-50%).
• Hover effects: Move buttons, cards, and icons horizontally.
• Sliding panels: Move interface panels into or out of view.
• Animations: Create horizontal movement with transitions or keyframes.
• Responsive designs: Use percentages and relative units for flexible movement.
• Custom properties: Reuse horizontal offsets across multiple components.

For example:

.panel {
  transform: translateX(0);
  transition: transform 0.3s ease;
}
.panel.is-hidden {
  transform: translateX(100%);
}

The hidden state moves the panel horizontally by its own reference width.

For an actual collapsible interface, also manage visibility, focus, and accessibility rather than relying on translation alone.

Limitations

The translateX() function has several requirements and behaviors to consider.

• It accepts exactly one length-percentage argument.
• Nonzero unitless numbers are invalid.
• It moves an element only along the X axis of the transform coordinate system.
• Percentages are based on the width of the transform reference box.
• It does not change the element's original position in normal document flow.
• Translated elements can overlap surrounding content.
• Elements moved outside a container may be clipped by overflow restrictions.
• Transform order affects the final result when combined with other transforms.
• A non-none transform creates a stacking context and a containing block for certain positioned descendants.
• Translation does not automatically remove an element from keyboard navigation or accessibility APIs.

Valid and Invalid Values

Valid declarations:

transform: translateX(40px);
transform: translateX(-50%);
transform: translateX(2rem);
transform: translateX(calc(100% - 20px));
transform: translateX(0);

Invalid declarations:

transform: translateX();
transform: translateX(20);
transform: translateX(20px, 30px);
transform: translateX(45deg);

These are invalid because they omit the argument, use a nonzero unitless number, provide too many arguments, or use an angle instead of a length-percentage.

Layout Considerations

Use translateX() for visual movement. If the surrounding layout must respond to the new position, consider using Flexbox, Grid, margins, or positioning instead.

Moving an element offscreen with a transform does not automatically make it hidden or inaccessible.

Accessibility

Provide reduced-motion alternatives for horizontal animations when appropriate.

@media (prefers-reduced-motion: reduce) {
  .animated-item {
    animation: none;
    transition: none;
  }
}

Ensure that translated interactive elements remain visible and accessible when they are intended to be used.

Browser Support

The CSS translateX() function is Baseline Widely available and is supported by modern versions of Chrome, Edge, Firefox, Safari, and other major browsers.

Two-dimensional CSS transforms have been supported for many years. Older browsers may require vendor prefixes, but prefixes are unnecessary in current major browsers.

For current compatibility information, visit Can I Use? and search for translateX().

Specifications

The translateX() function is defined in the CSS Transforms Module Level 1 specification.

The specification defines the function's syntax, accepted length-percentage values, and its relationship to the two-dimensional transformation matrix.

Related functions include translate(), translateY(), translateZ(), and translate3d().