2D Rotate & Scale

The rotate and scale transform functions spin and resize an element around its transform origin (defaulting to the element's centre).

rotate()

Accepts angle values: deg, rad, grad, or turn. Positive values rotate clockwise. The standalone rotate property is also available.

scale()

scale(1.2) scales uniformly. scale(x, y) scales independently per axis. A value of 1 is normal, 0.5 is half size, -1 flips the axis.

Combining Transforms

Chain multiple functions in one transform declaration. Order matters — transformations are applied right to left.

Example

/* Simple rotation */
.icon-spin {
    transform: rotate(45deg);
}

/* Continuous spin animation */
@keyframes spin {
    to { transform: rotate(1turn); } /* 1turn = 360deg */
}
.loader {
    animation: spin 1s linear infinite;
}

/* Scale up on hover */
.zoom-card {
    transition: transform 0.25s ease;
}
.zoom-card:hover {
    transform: scale(1.05);
}

/* Flip (mirror) */
.mirrored {
    transform: scaleX(-1);
}

/* Combined rotate + scale */
.badge:hover {
    transform: rotate(-3deg) scale(1.08);
}

/* Standalone properties (modern CSS) */
.modern {
    rotate: 30deg;
    scale: 1.1;
}

CSS

Full Editor

Pro Tip

When scaling images or cards on hover, also add will-change: transform to give the browser a hint to promote the element to its own compositor layer ahead of time — this prevents a frame of jank at the start of the animation.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned