css - 2D Transforms Part 1: Translating Elements

The translate() function moves an element from its original position along the X and Y axes.

Examples and Explanation

Basic Translation

.translate {

    transform: translate(50px, 20px);

}

HTML Code:

<div class="translate">Translated Element</div>

Explanation: The element is moved 50px to the right and 20px down.

Single-Axis Translation

.translate-x {

    transform: translateX(100px);

}

.translate-y {

    transform: translateY(-50px);

}

Explanation: Use translateX() or translateY() for movement along a single axis.

Percentage-Based Translation

.translate-percent {

    transform: translate(50%, 50%);

}

Explanation: A percentage value moves the element relative to its size or parent size.

Use Case: Translation is commonly used for creating sliding effects or repositioning elements dynamically.