When you need to move an element sideways in a web interface, translateX() is the CSS function that does exactly that. It shifts an element horizontally — right for positive values, left for negative ones.

What translateX() does

This function lives inside the transform property and is defined in the CSS Transforms Module Level 1 draft. It accepts a single <length-percentage> argument:

  • <length>: Absolute units like 80px move the element 80px right; -24ch moves 24 characters left.
  • <percentage>: Relative to the element's own width. For a 400px-wide box, translateX(50%) moves it 200px right, and translateX(-50%) moves it 200px left.

Practical use cases for business sites

Sliding sidebars

A common pattern for mobile navigation: slide a panel in from the side. Start with transform: translateX(-100%) to hide it off-screen, then toggle to translateX(0) when the user clicks a button. Add a transition for smooth movement.

.sidebar { transform: translateX(-100%); transition: transform 0.2s ease-in; }
.sidebar.open { transform: translateX(0); }

Infinite marquee

Need to show a row of client logos or new arrivals on your e-commerce site? A marquee scrolls them continuously. Use a keyframe animation from translateX(0) to translateX(-50%) with animation: marquee-scroll 20s linear infinite. Half the width shifts left, then loops.

Skeleton loaders with shimmer

Prevent layout shifts while content loads — especially important for GDPR-compliant sites in the EU where speed matters. A static gray placeholder works, but adding a shimmer effect makes it feel polished. Use a ::after pseudo-element starting at translateX(-120%), animate it to 120%, and repeat infinitely. The gradient passes over the skeleton like light.

Key behavior: no layout shifts

Unlike margin or position: relative, translateX() does not affect document flow. The element visually moves, but its original space stays reserved. Neighbouring boxes won't jump or reflow. This makes it ideal for animations without triggering expensive layout recalculations — a real win for performance on mobile devices.

Watch out for hover flickering

If you apply translateX() directly on a :hover state, and the element moves far enough away from the cursor, the hover is lost, the element snaps back, and you get a flickering loop. Fix: wrap the moving element in a parent container and attach the :hover to the parent. The child translates, the hover stays stable.