CSS Scale: How to Scale Elements with CSS

To scale elements with CSS is really simple.

Use the property transform then set a scale() value.

Example:

transform: scale(1.2);

This scales the element 120% of its normal size.

Smooth CSS scale

To smooth the scaling animation, we can use the property transition:

.smooth-css-scale {
	transition: transform 0.3s ease-in-out;
}

.smooth-css-scale:hover {
	transform: scale(1.1);
}

Important Notes About Scaling:

• Scaling affects child elements: If the scaled element has child elements, they’ll also scale along with it.
• No impact on layout: Scaling an element doesn’t change its actual dimensions in the document flow – it’s purely a visual effect.
• Browser support: transform: scale() works in all modern browsers, so you don’t need to worry about compatibility.

Complex CSS scale

When scaling with CSS, you can adjust the size of an element along two directions:

• X-axis: Controls the width (horizontal size).
• Y-axis: Controls the height (vertical size).

If you use one value in scale(), like scale(1.5), it scales both width and height equally. But if you use two values, like scale(1.5, 0.8):

• 1.5 makes it 150% wider.
• 0.8 makes it 80% as tall.

This lets you stretch or shrink the element in different directions!

Example of X and Y Axis Scaling

Here’s an example where we scale the element to be wider but shorter:

transform: scale(1.5, 0.8);

In this example:

• 1.5 makes the element 150% as wide as its normal size (horizontal stretch).
• 0.8 makes the element 80% as tall as its normal size (vertical shrink).

Setting the Transform Origin

By default, scaling happens from the center of the element. But you can control the scaling point with the transform-origin property.

Example:

.css-scale-from-top-left {
	transform-origin: top left;
	transform: scale(1.5);
}

This scales the element from the top-left corner instead of the center.

Combining Scale with Other Transforms

Scaling doesn’t have to be used on its own. You can combine it with other transformations like rotate, translate, or skew.

Example:

.scale-and-rotate {
	transform: scale(1.2) rotate(15deg);
}

Here, the element is scaled 120% and rotated 15 degrees at the same time.

---

Become a CSS Pro

Try your design ideas in seconds with a universal visual CSS editor that generates code for you. Say hello to speed, joy, and stunning designs in just a few clicks with CSS Pro. Click here to try it free.