How to Combine Transforms in CSS: Syntax and Examples

You combine multiple transforms in CSS by listing them one after another inside a single transform property, separated by spaces. For example, transform: rotate(45deg) scale(1.5) translateX(100px); applies all three transforms in order.

Syntax

The transform property accepts multiple transform functions separated by spaces. Each function applies a different effect like rotation, scaling, or translation. The order matters because transforms are applied one after another.

• rotate(angle): Rotates the element by the given angle.
• scale(factor): Scales the element size by the factor.
• translateX(distance), translateY(distance): Moves the element horizontally or vertically.
• skewX(angle), skewY(angle): Skews the element along X or Y axis.

css

transform: rotate(30deg) scale(1.2) translateX(50px);

Example

This example shows a square that is rotated 45 degrees, scaled up by 1.5 times, and moved 100 pixels to the right. All transforms are combined in one transform property.

css

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  transform: rotate(45deg) scale(1.5) translateX(100px);
  transition: transform 0.5s ease;
}

.box:hover {
  transform: rotate(0deg) scale(1) translateX(0);
}

Output

A green square rotated diagonally, bigger than normal, and shifted right by 100px in the center of the page. On hover, it returns to normal size, position, and rotation.

Common Pitfalls

One common mistake is using multiple transform properties separately, which causes only the last one to apply. Always combine all transforms in a single transform property.

Also, the order of transforms matters. For example, scaling before translating moves the element differently than translating before scaling.

css

/* Wrong: only the last transform applies */
.box {
  transform: rotate(30deg);
  transform: translateX(50px);
}

/* Correct: combine transforms in one property */
.box {
  transform: rotate(30deg) translateX(50px);
}

Quick Reference

Transform Function	Description	Example
rotate(angle)	Rotates element by angle	rotate(45deg)
scale(factor)	Scales element size	scale(1.5)
translateX(distance)	Moves element horizontally	translateX(100px)
translateY(distance)	Moves element vertically	translateY(50px)
skewX(angle)	Skews element along X axis	skewX(20deg)
skewY(angle)	Skews element along Y axis	skewY(10deg)

Key Takeaways

Combine multiple transforms by listing them in one transform property separated by spaces.

The order of transforms affects the final result, so arrange them carefully.

Never use multiple transform properties separately; only the last one works.

Common transform functions include rotate, scale, translateX/Y, and skewX/Y.

Use transitions to animate combined transforms smoothly.