2D Translate Transform

The translate transform function moves an element from its normal position without affecting document flow. Other elements do not reflow when a translated element moves.

Syntax

transform: translate(x, y) — moves both axes. translateX(x) and translateY(y) move a single axis. CSS also provides the standalone translate property (no function wrapper needed).

Units

Accepts any length unit. Percentages are relative to the element's own size (not the parent), making translate(-50%, -50%) perfect for centring.

Performance

Translate is GPU-accelerated — it triggers compositing rather than layout or paint, making it ideal for animations.

Example

/* Move element 20px right and 10px down */
.shifted {
    transform: translate(20px, 10px);
}

/* Hover lift effect */
.card {
    transition: transform 0.2s ease;
}
.card:hover {
    transform: translateY(-4px);
}

/* Perfect centring technique */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* without transform: position is top-left corner */
}

/* Standalone translate property (modern syntax) */
.icon {
    translate: 0 -2px; /* same as transform: translateY(-2px) */
}

/* Animated slide-in */
@keyframes slideIn {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}
.drawer {
    animation: slideIn 0.3s ease-out;
}

CSS

Full Editor

Pro Tip

Prefer transform: translate() over changing top/left/margin for animations — translate runs on the compositor thread and does not trigger layout recalculation, resulting in smooth 60 fps movement.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned