CSS translateY() Function

CSS translateY() Function

The CSS translateY() function moves an element vertically along the Y 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 downward, while negative values move it upward in the normal, unrotated coordinate system.

Syntax

translateY(ty)

The translateY() function requires one length or percentage value that determines vertical movement.

Examples:

transform: translateY(50px);
transform: translateY(-30px);
transform: translateY(50%);
transform: translateY(-50%);
transform: translateY(2rem);
transform: translateY(10vh);
transform: translateY(0);

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

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

This moves the box 50px downward.

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

Parameters

The translateY() function accepts exactly one argument.

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

For example:

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

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

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

How It Works

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

For example:

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

The element appears 60px below 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 vertical translation value changes the Y coordinate without directly changing the X 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 vertical movement in the normal coordinate system.

Positive Values

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

Moves the element 50px downward.

Negative Values

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

Moves the element 50px upward.

Zero

.box {
  transform: translateY(0);
}

Applies no vertical displacement.

The Y axis follows the transform coordinate system rather than the writing direction. A positive translation normally moves downward even when the element uses a vertical writing mode.

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

Length Values

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

Pixels

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

Moves the element 40px downward.

Font-Relative Units

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

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

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

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

Viewport Units

.box {
  transform: translateY(10vh);
}

The element moves vertically by 10% of the viewport height.

Calculated Values

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

The movement is calculated from the combined length values.

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

Percentage Values

Percentage values in translateY() are resolved relative to the height 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 {
  height: 200px;
  transform: translateY(50%);
}

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

Similarly:

.box {
  height: 200px;
  transform: translateY(-50%);
}

This moves the element 100px upward.

A translation of 100% moves the element vertically by the full height of its transform reference box.

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

This behavior makes percentage translation useful for vertical 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 vertical translations:

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

Use translateY() when only vertical movement is required.

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

Combining Transform Functions

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

For example:

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

This combines vertical translation with rotation.

The order of the functions affects the final transformation.

Compare:

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

In the first declaration, the element rotates and then moves vertically along the original Y axis.

In the second declaration, the vertical 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 translateY() when translation is the only transform.

For example:

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

The element still moves 50px vertically.

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

.box {
  transform-origin: top left;
  transform: translateY(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 vertical translation distances for reuse.

For example:

.box {
  --move-y: 40px;
  transform: translateY(var(--move-y));
}

Changing --move-y changes the vertical translation.

A fallback can also be supplied:

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

If --move-y 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 vertical translations.

HTML:

<div class="translatey-demo">
  <div class="translatey-column">
    <div class="translatey-box">Original</div>
  </div>
  <div class="translatey-column">
    <div class="translatey-box translatey-down">Down 40px</div>
  </div>
  <div class="translatey-column">
    <div class="translatey-box translatey-up">Up 40px</div>
  </div>
</div>

CSS:

.translatey-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  padding: 10px;
}
.translatey-column {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 170px;
  background-color: #f1f3f5;
}
.translatey-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 55px;
  color: #fff;
  background-color: #3498db;
}
.translatey-down {
  background-color: #16a085;
  transform: translateY(40px);
}
.translatey-up {
  background-color: #8e44ad;
  transform: translateY(-40px);
}

The blue box remains at its original vertical position.

The green box moves 40px downward, while the purple box moves 40px upward.

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

Percentage Translation Example

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

HTML:

<div class="translatey-percent-demo">
  <div class="translatey-percent-box">translateY(50%)</div>
</div>

CSS:

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

The box is 80px high, so translateY(50%) moves it 40px downward.

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

Vertical Centering Example

The translateY() function can be combined with absolute positioning to center an element vertically.

HTML:

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

CSS:

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

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

The translateY(-50%) function then moves the element upward by half its own height.

This centers the element vertically, even when its height changes.

Flexbox and Grid provide alternative centering methods without absolute positioning.

Transition Example

The translateY() function can create vertical movement effects using CSS transitions.

HTML:

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

CSS:

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

When hovered or focused, the button moves 10px upward.

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

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

Common Uses

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

• Vertical positioning: Apply visual offsets along the Y axis.
• Centering: Combine top: 50% with translateY(-50%).
• Hover effects: Move buttons, cards, and icons upward or downward.
• Sliding panels: Move interface panels vertically into or out of view.
• Animations: Create vertical movement with transitions or keyframes.
• Responsive designs: Use percentages and relative units for flexible movement.
• Custom properties: Reuse vertical offsets across multiple components.

For example:

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

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

Limitations

The translateY() 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 Y axis of the transform coordinate system.
• Percentages are based on the height 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: translateY(40px);
transform: translateY(-50%);
transform: translateY(2rem);
transform: translateY(calc(100% - 20px));
transform: translateY(0);

Invalid declarations:

transform: translateY();
transform: translateY(20);
transform: translateY(20px, 30px);
transform: translateY(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 translateY() 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 vertical 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 translateY() 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 translateY().

Specifications

The translateY() 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(), translateX(), translateZ(), and translate3d().