← Back to functions

CSS Function

translate()

Transform

Moves an element horizontally and/or vertically without affecting document flow.

Syntax

translate(x, y)

Example

transform: translate(50%, -50%);

Common use cases

Centering absolutely positioned elements
Slide-in animations
Off-canvas menus

Practical developer insight

translate() inside transform doesn't affect layout flow — it's the preferred way to animate position (better performance than animating top or left).

Related

scale()rotate()transform