CSS translate Property

What You’ll Learn

The translate property moves an element horizontally, vertically, or in 3D — without changing its place in the document flow. It is ideal for hover lifts, badges, and centering overlays.

Introduction

The translate property in CSS is used to move an element from its current position, both horizontally and vertically. It is part of the CSS transform family, which allows developers to manipulate elements in 2D and 3D space without affecting the layout of the document.

Definition and Usage

Use translate when you need to reposition an element visually — for example, nudging a badge, lifting a card on hover, or centering a modal. Pair it with transition for smooth animated movement.

📝 Syntax

The syntax for the translate property is as follows:

element {
  translate: tx ty tz;
}

• tx — horizontal translation (X axis)
• ty — vertical translation (Y axis)
• tz — optional depth translation (Z axis) for 3D

Basic Example

.box {
  translate: 50px 20px;
}

Syntax Rules

• One value sets X only; two values set X and Y; three values add Z.
• Length units include px, em, rem, and %.
• Percentages are relative to the element’s own size (border box).
• Default is none (no movement).
• The property is not inherited.

Related Properties

• transform — shorthand that can include translate(), rotate(), scale()
• rotate — standalone rotation property
• scale — standalone scaling property
• transition — animate translate changes smoothly
• transform-origin — pivot point for transforms

🎯 Default Value

The default value is none, which means no translation — the element stays in its original visual position.

💎 Property Values

The translate property accepts length and percentage values.

When to Use translate

translate is ideal for visual repositioning without changing layout:

• Hover lifts — Move cards or buttons slightly on hover with translate: 0 -8px.
• Badges and labels — Nudge small elements relative to text or icons.
• Centering overlays — Combine with top: 50%; left: 50% and translate: -50% -50%.
• Slide-in panels — Animate from off-screen with transitions on translate values.

Examples Gallery

In this example, we’ll translate a div element horizontally and vertically using the translate property.

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    translate: 50px 20px;
  }
</style>

<div class="box"></div>

.x { translate: 40px 0; }
.y { translate: 0 30px; }
.xy { translate: 30px 20px; }

.card {
  translate: 0 0;
  transition: translate 0.25s ease;
}

.card:hover {
  translate: 0 -8px;
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

♿ Accessibility

• Do not hide content off-screen — Translating elements out of view can remove them from sight but they may still receive focus.
• Reduced motion — Disable or reduce translate animations when prefers-reduced-motion: reduce is set.
• Keyboard users — Ensure hover-only translate effects have equivalent focus-visible styles.
• Screen readers — translate is visual only; do not rely on it to convey semantic state changes.

translate + transition

Animate translate for smooth hover lifts and slide effects. It performs better than animating top, left, or margin because it does not trigger layout reflow.

.btn {
  translate: 0 0;
  transition: translate 0.2s ease;
}
.btn:hover {
  translate: 0 -2px;
}

💡 Best Practices