CSS translate() Function

CSS translate() Function

The CSS translate() function moves an element horizontally, vertically, or in both directions without changing its original layout position.

It is used with the transform property and accepts length or percentage values for movement along the X and Y axes. Positive and negative values control the direction of movement, and the function can be combined with other transforms.

Syntax

translate(tx)
translate(tx, ty)

The translate() function accepts one or two values.

The first value specifies horizontal movement. The optional second value specifies vertical movement.

Examples:

transform: translate(50px);
transform: translate(50px, 20px);
transform: translate(-30px, 15px);
transform: translate(25%, 50%);
transform: translate(0, -40px);
transform: translate(2rem, 1rem);

If the second value is omitted, the vertical translation defaults to zero.

For example, these declarations are equivalent:

transform: translate(50px);
transform: translate(50px, 0);

The two arguments must be separated by a comma.

Unlike the separate translate property, the translate() function is used as a value of the transform property.

Parameters

The translate() function accepts the following parameters:

Lengths can use units such as px, rem, em, vw, and vh.

Percentages are also supported and are resolved relative to the element's transform reference box.

Examples:

translate(20px, 30px)
translate(2rem, 1rem)
translate(50%, 25%)
translate(calc(100% - 20px), 0)

Unitless zero is allowed, but nonzero lengths require a unit.

For example, translate(20, 30) is invalid because the values are unitless nonzero numbers.

How It Works

The translate() function changes an element's rendered position without moving it to a new location in normal document flow.

For example:

.box {
  transform: translate(60px, 30px);
}

The element is displayed 60px to the right and 30px downward from its original position.

However, the original layout space remains reserved for the element.

This means neighboring elements generally retain their original positions, even if the translated element overlaps them.

The translation is represented internally by a transformation matrix. In two dimensions, the X and Y translation values determine the horizontal and vertical offsets.

Translation can also be animated using CSS transitions and keyframes.

Coordinate System

The translate() function moves an element along the X and Y axes of its transformation coordinate system.

For an element without a preceding rotation or other coordinate-system-changing transform:

transform: translate(50px, 0);

This moves the element 50px to the right.

transform: translate(0, 50px);

This moves the element 50px downward.

transform: translate(-50px, -25px);

This moves the element 50px to the left and 25px upward.

When multiple transform functions are combined, rotation and scaling can affect the final direction and distance of translation.

Length Values

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

Pixels

.box {
  transform: translate(40px, 20px);
}

The element moves 40px horizontally and 20px vertically.

Relative Font Units

.box {
  transform: translate(2rem, 1rem);
}

The movement depends on the root element's font size.

Viewport Units

.box {
  transform: translate(10vw, 5vh);
}

The horizontal distance is based on viewport width, while the vertical distance is based on viewport height.

Calculated Lengths

.box {
  transform: translate(calc(20px + 1rem), calc(10px * 2));
}

CSS mathematical expressions can calculate the translation distances.

Use length values when movement should be based on a specific CSS distance rather than a percentage of the element's reference box.

Percentage Values

Percentages in translate() are calculated relative to the element's transform reference box, which is controlled by transform-box.

For ordinary HTML elements, the reference box is typically the border box.

For example:

.box {
  width: 200px;
  height: 100px;
  transform: translate(50%, 50%);
}

The element moves 100px to the right and 50px downward, assuming the border box measures 200px by 100px.

The horizontal percentage is based on the reference box's width, while the vertical percentage is based on its height.

Percentage translation is different from percentage positioning with properties such as left and top.

For example:

transform: translate(-50%, -50%);

This moves the element left by half its reference width and upward by half its reference height.

This behavior is particularly useful for centering positioned elements.

Positive and Negative Values

Positive and negative translation values determine the direction of movement.

Positive Horizontal Translation

transform: translate(50px, 0);

Moves the element to the right.

Negative Horizontal Translation

transform: translate(-50px, 0);

Moves the element to the left.

Positive Vertical Translation

transform: translate(0, 30px);

Moves the element downward.

Negative Vertical Translation

transform: translate(0, -30px);

Moves the element upward.

Combined Translation

transform: translate(-40px, 25px);

Moves the element left by 40px and downward by 25px.

These directions describe the normal screen coordinate system before any other transforms change the element's axes.

translate() vs. translateX() and translateY()

The translate(), translateX(), and translateY() functions all move elements, but they accept different arguments.

These declarations produce equivalent translations:

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

These are also equivalent:

transform: translate(0, 20px);
transform: translateY(20px);

A combined translation can be expressed using two functions:

transform: translate(40px, 20px);
transform: translateX(40px) translateY(20px);

Use translate() when both coordinates should be specified together, and the axis-specific functions when only one direction is needed.

Combining Transform Functions

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

For example:

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

This combines translation with rotation.

The order of transform functions matters because transforms are composed in the order they are written and their effects are applied from right to left.

Compare:

transform: translate(100px, 0) rotate(45deg);
transform: rotate(45deg) translate(100px, 0);

In the first declaration, the element is rotated and then translated along the original horizontal direction.

In the second declaration, the translation occurs along an axis affected by the rotation.

Changing the order can therefore change the final position.

When combining transforms, test the resulting position and movement rather than assuming the functions are interchangeable.

Transform Origin

The transform-origin property defines the point around which transformations are applied.

For a translation by itself, changing transform-origin does not change the translation distance.

For example:

.box {
  transform-origin: top left;
  transform: translate(50px, 20px);
}

The element still moves 50px to the right and 20px downward.

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

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

In this case, the rotation occurs around the top-left transform origin rather than the default center.

CSS Custom Properties

CSS custom properties can store translation distances for reuse across elements.

For example:

.box {
  --move-x: 40px;
  --move-y: 20px;
  transform: translate(var(--move-x), var(--move-y));
}

Changing either custom property changes the corresponding translation distance.

Fallback values can also be supplied:

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

If a custom property is not defined, its fallback is used.

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

Example

The following example compares an element's original position with its translated position.

HTML:

<div class="translate-demo">
  <div class="translate-box">Original</div>
  <div class="translate-box translate-moved">Translated</div>
</div>

CSS:

.translate-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  padding: 25px;
}
.translate-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 70px;
  color: #fff;
  background-color: #3498db;
}
.translate-moved {
  background-color: #16a085;
  transform: translate(30px, 20px);
}

The green box moves 30px to the right and 20px downward from the position it would otherwise occupy.

The translation does not change the space reserved for the box in the flex layout.

Percentage Translation Example

The following example demonstrates how percentage values are calculated from an element's own dimensions.

HTML:

<div class="translate-percent-demo">
  <div class="translate-percent-box">50%, 50%</div>
</div>

CSS:

.translate-percent-demo {
  padding: 20px;
  min-height: 150px;
  background-color: #f1f3f5;
}
.translate-percent-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 80px;
  color: #fff;
  background-color: #8e44ad;
  transform: translate(50%, 50%);
}

The box moves 80px to the right and 40px downward because its width is 160px and its height is 80px.

These percentages are based on the box itself, not the dimensions of its parent container.

Centering Example

The translate() function is commonly combined with absolute positioning to center an element inside a container.

HTML:

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

CSS:

.translate-center-demo {
  position: relative;
  height: 200px;
  background-color: #f1f3f5;
}
.translate-center-box {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 70px;
  color: #fff;
  background-color: #2e86c1;
  transform: translate(-50%, -50%);
}

The top and left properties position the element's top-left corner at the center of the container.

The translate(-50%, -50%) function then moves the element left by half its own width and upward by half its own height.

This centers the element horizontally and vertically.

Modern Flexbox and Grid layouts can also center elements without requiring absolute positioning or transforms.

Transition Example

The translate() function can create movement effects when combined with CSS transitions.

HTML:

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

CSS:

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

When hovered or focused, the button moves 10px to the right and 5px upward.

The transition animates the movement between the original and translated positions.

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

Common Uses

The translate() function is useful for visual positioning and movement without changing normal document flow.

• Centering elements: Combine percentage translations with positioned elements.
• Hover effects: Move buttons, cards, or icons when users interact with them.
• Animations: Move elements between positions using CSS keyframes.
• Interface adjustments: Apply small visual offsets without changing surrounding layout.
• Responsive positioning: Use percentages and relative units for flexible movement.
• Combined transforms: Move elements while also rotating or scaling them.
• Custom properties: Control translation distances with reusable variables.

For example:

.card {
  transform: translate(0, 0);
  transition: transform 0.3s ease;
}
.card:hover {
  transform: translate(0, -8px);
}

The card moves upward by 8px when hovered, without changing its reserved layout space.

Limitations

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

• It accepts one or two length-percentage values.
• The first value controls horizontal movement and the second controls vertical movement.
• The second value defaults to zero when omitted.
• Nonzero unitless numbers are invalid.
• The two arguments must be separated by a comma.
• Percentages are calculated relative to the transform reference box.
• It does not change the element's original position in normal document flow.
• Translated elements may overlap surrounding content.
• It does not directly move an element along the Z axis.
• Transform function order affects the result when multiple transforms are combined.
• A non-none transform creates a stacking context and a containing block for certain positioned descendants.

Valid and Invalid Values

Valid declarations:

transform: translate(20px);
transform: translate(20px, 30px);
transform: translate(-50%, -50%);
transform: translate(2rem, 1rem);
transform: translate(0, 40px);

Invalid declarations:

transform: translate(20);
transform: translate(20px 30px);
transform: translate(20px, 30px, 40px);
transform: translate(30deg, 20px);

The invalid examples contain a nonzero unitless number, a missing comma, too many arguments, or an unsupported angle value.

Layout Considerations

Translation affects an element's visual position rather than its normal layout position.

If a translated element moves outside its container, it may overlap other content or be clipped by an ancestor with restricted overflow.

Use Flexbox, Grid, margins, or positioning when the layout itself needs to change.

Accessibility

When animating translations, avoid excessive movement and provide a reduced-motion alternative when appropriate.

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

Make sure translated interactive elements remain visible, reachable, and usable with a keyboard.

Browser Support

The CSS translate() transform 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 not necessary in current major browsers.

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

Specifications

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

The specification defines its syntax, translation values, and relationship to the two-dimensional transformation matrix.

Related functions include translateX(), translateY(), translate3d(), rotate(), and scale().