Translate

Definition

Transform utilities used to move an element up, down, left, or right relative to its original starting position.

Explain Like I'm New

Nudging things. `translate-y-4` pushes the element downwards by 1rem (16px). `-translate-y-4` pulls it upwards by 1rem. This is the secret to all 'sliding' animations.

Real World Example

A Mobile Navigation Drawer that is hidden completely off the left side of the screen (`-translate-x-full`). When the menu button is clicked, JS removes that class and it slides onto the screen.

Common Use Cases

•Off-canvas menus
•Toasts/Notifications
•Parallax effects

Interactive Example

Interview Questions

basic

What class physically lifts a card up towards the top of the screen by a small amount on hover?

intermediate

What does `-translate-x-full` specifically do?

Flash Cards

Question

Lifts up?

Click to reveal answer

Answer

`-translate-y-1` or `-translate-y-2` (Negative Y goes UP in CSS).

Question

translate-x-full?

Click to reveal answer

Answer

It translates the element exactly 100% of its OWN width to the left. If the box is 300px wide, it moves it 300px to the left, perfectly hiding it off-screen.