How to Combine Multiple CSS Transforms

Combine the functions in one declaration

In this example, the first rule loses its translation because the second transform declaration replaces it. The combined version keeps both operations. Transform functions are separated by spaces, not commas.

.overwritten {
  transform: translateX(20px);
  transform: rotate(15deg); /* Only this value survives */
}

.combined {
  transform: translateX(20px) rotate(15deg) scale(1.1);
}

Why swapping rotate and translate changes the result

Transform matrices are multiplied in the order written; when applied to a point, the rightmost function acts first. Set transform-origin: 0 0 to make this example easy to reason about. The element’s origin moves right in the first case and down in the second.

.move-right {
  transform-origin: 0 0;
  transform: translateX(100px) rotate(90deg);
  /* Rotate first, then move 100px along the original X axis. */
}

.move-down {
  transform-origin: 0 0;
  transform: rotate(90deg) translateX(100px);
  /* Translate first; rotation turns that displacement downward. */
}

Use individual properties for independent changes

The translate, rotate, and scale properties compose without replacing each other. The browser applies them in the fixed order translate, rotate, scale, then the transform property, regardless of declaration order. This makes a hover scale independent of a base translation.

.card {
  translate: 20px 0;
  rotate: 3deg;
  scale: 1;
  transition: scale 160ms ease;
}

.card:hover,
.card:focus-visible {
  scale: 1.05;
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}

Debug a transform that jumps at a breakpoint

Inspect the computed transform and the individual properties before changing numbers. A media query or interaction state may replace a whole transform list. Also remember that transforms change the rendered position without moving surrounding elements in normal flow.

• Understand offsetParent and layout coordinates
• Debug CSS layout issues