Combine Rotate and Scale Transforms in CSS

Combining Rotate and Scale

When you need both rotation and scaling, you must combine them in a single transform property. Setting transform twice would override the first declaration.

The CSS

.icon-button:hover {
  transform: rotateZ(15deg) scaleX(1.2) scaleY(1.2);
  transition: transform 0.2s ease;
}

Why a Single transform Property?

CSS does not merge multiple transform declarations:

/* WRONG: scale overrides rotate */
.element {
  transform: rotateZ(45deg);
  transform: scaleX(1.5) scaleY(1.5); /* This replaces the rotate! */
}

/* CORRECT: combine in one property */
.element {
  transform: rotateZ(45deg) scaleX(1.5) scaleY(1.5);
}

Order Effects

The order of rotate and scale in the transform string produces slightly different results:

• rotate then scale — The element rotates first, then the rotated shape is scaled along the original axes.
• scale then rotate — The element is scaled first, then the scaled shape is rotated.

For most hover effects, the visual difference is negligible, but for asymmetric scaling (scaleX !== scaleY), the order matters significantly.

Practical Example: Playful Button

.btn {
  transition: transform 0.15s ease;
}
.btn:hover {
  transform: rotateZ(-3deg) scaleX(1.05) scaleY(1.05);
}
.btn:active {
  transform: rotateZ(0deg) scaleX(0.97) scaleY(0.97);
}