Translate

Learn to move elements with translate().

The translate() function

translate() shifts an element along the X and Y axes. It takes two values: translate(20px, 30px) moves it 20 pixels right and 30 pixels down.

With a single value Y is treated as zero: translate(20px) only shifts right. Handy when you want a one-axis move.

translateX and translateY

To change one axis only, use translateX() or translateY(). translateX(-10px) shifts 10 pixels left; translateY(15px) shifts 15 pixels down.

These functions help readability: at a glance you see which axis is moving. Choosing a single axis over two-value translate() often gives a cleaner line.

translate with percentages

You can write a percentage instead of pixels. The percentage is based on the element's own size, not the container. translateX(50%) shifts the element by half its own width to the right.

That is handy for centring: with translate(-50%, -50%) you can place the exact middle of an absolutely positioned element on a point.

Exercise Hover-driven slide

Add two style blocks. First a .card selector with transform: translateX(0). Second a .card:hover selector with transform: translateX(12px). The card should slide right on hover.

Show example solution

/* add a transform for the card */
.card {
  transform: translateX(0);
}
.card:hover {
  transform: translateX(12px);
}

Test yourself

What does translate(20px, 30px) do?
```
.arrow {
  transform: translate(20px, 30px);
}
```
- Shifts 20 pixels right, 30 pixels down
- Shifts 20 pixels up, 30 pixels left
- Grows 20 pixels, shrinks 30 pixels
- Rotates 20 degrees right, 30 degrees down
Show answer

Shifts 20 pixels right, 30 pixels down — Correct. The first value is the X axis (20 pixels right), the second is the Y axis (30 pixels down).

Write the translateX function

.arrow {
  transform: ____(15px);
}

Show answer

.arrow {
  transform: translateX(15px);
}

Match each function to its motion

translateX(10px)

10 pixels right
translateY(-5px)

5 pixels up
translate(0, 20px)

20 pixels down
translate(-10px, 0)

10 pixels left

Next lesson: Rotate

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies