Translate Transform

The translate() function moves an element from its original position. It is like using margin to shift something, but translate does not affect the layout flow. Other elements act as if the translated element is still in its original spot.

Basic Translation

You can translate along one axis or both. Positive X moves right, positive Y moves down. Negative values go the opposite direction.

.move-right {
  transform: translateX(50px);
}

.move-down {
  transform: translateY(30px);
}

.move-diagonal {
  transform: translate(50px, 30px);
}

.move-up {
  transform: translateY(-20px);
}
    

You can use any CSS length unit — pixels, rem, em, percentages, or viewport units. Percentage values are relative to the element's own size, not the parent.

Centering with Translate

One of the classic centering techniques uses translate. When you know an element's width and height, you can center it perfectly with translate.

.centered-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
    

The -50% moves the element back by half its own width and height, placing it perfectly centered. This works even if the element's size changes — the percentage adjusts automatically.

Hover Slide Effect

Translate is perfect for hover effects where elements slide into view or shift position. Combined with transitions, it creates smooth, performant animations.

.slide-up {
  transform: translateY(0);
  transition: transform 0.3s ease;
}

.slide-up:hover {
  transform: translateY(-10px);
}

/* Or slide in from the side */
.slide-in {
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.slide-in.visible {
  transform: translateX(0);
}
    

Unlike changing top or left, translate does not trigger layout recalculation, making it much more performant for animations. Always prefer translate for movement animations.