What does transform: translate() do?

Q: What does transform: translate() do?

The `transform: translate()` function in CSS moves an element along the X and Y axes without changing its position in the document flow. It is a part of the CSS `transform` property and is often used for animations, transitions, and precise element placement. `translateX(value)` — moves an element horizontally by the specified amount. `translateY(value)` — moves an element vertically by the specified amount. `translate(x, y)` — moves an element both horizontally and vertically at once. `translateZ(value)` — moves an element along the Z-axis in 3D space. .box { width: 100px; height: 100px; background: steelblue; transition: transform 0.3s ease; } .box:hover { transform: translate(50px, 20px); } In this example, the box smoothly moves 50px to the right and 20px down when hovered. The movement is animated because of the `transition` property applied to the transform. Does not affect surrounding elements or trigger layout recalculations (unlike margin or position changes). Provides smoother, hardware-accelerated animations. Can be combined with other transforms like `rotate()` and `scale()` for advanced effects. .icon:hover { transform: translateY(-10px) scale(1.1) rotate(5deg); transition: transform 0.2s ease-out; } Here, `translateY(-10px)` lifts the icon upward, while `scale()` enlarges it slightly and `rotate()` adds a subtle spin — all rendered smoothly through GPU acceleration.

Difficulty: 3/10

CSS transforms, positioning, animation

Using transform: translate() in CSS

The transform: translate() function in CSS moves an element along the X and Y axes without changing its position in the document flow. It is a part of the CSS transform property and is often used for animations, transitions, and precise element placement.

How translate() Works

1
translateX(value) — moves an element horizontally by the specified amount.
2

What does transform: translate() do?

Difficulty: 3/10

CSS transforms, positioning, animation

Using transform: translate() in CSS

How translate() Works

1
translateX(value) — moves an element horizontally by the specified amount.
2

What does transform: translate() do?

Using transform: translate() in CSS

What does transform: translate() do?

Using transform: translate() in CSS

Scenario Questions

Follow-up Questions