Scale in CSS
Scale in CSS is used to resize (increase or decrease) the size of an element visually, without changing its actual layout space.
This means we can make an element look bigger or smaller without changing the HTML structure.
Important Concept
Scaling affects only appearance (look), not layout space.
So even if an element looks bigger on screen, its original space in the layout remains the same.
Example:
If width of a div = 200px
After transform: scale(2); visually it appears 400px
But in layout, browser still treats it as 200px.
Important Note
If an element is inline (like <span> or <a>), scaling might not work properly because inline elements don’t form a box.
Solution
Before scaling:
display: inline-block;
Then apply scaling, it will work correctly.
What Does Scale Do?
Scale multiplies the size of an element.
| Code | Meaning |
| scale(2) | Makes the element 2 times bigger |
| scale(0.5) | Makes the element half the size |
| scale(1) | No change |
Scale changes:
- Width
- Height
at the same time
Syntax
transform: scale(value);Example
transform: scale(2);Meaning: Increase size by 2 times (both width + height)
transform: scale(0.5);Meaning: Reduce size to 50%
Scaling Width & Height Separately
You can control scaling separately along X and Y axis:
transform: scale(x, y);
| Example | Meaning |
| transform: scale(2, 1); | Width = 2x, Height = same |
| transform: scale(1, 3); | Width = same, Height = 3x |
| transform: scale(0.5, 1.5); | Width = half, Height = 1.5x |
scaleX( ) & scaleY( )
Only width
transform: scaleX(2);→ Width becomes 2 times; height unchanged
transform: scaleX(0.3);
→ Width becomes 30% of original
Only height
transform: scaleY(3);→ Height becomes 3 times; width unchanged
transform: scaleY(0.5);→ Height becomes half
Example Code
<style>
.box {
width: 100px;
height: 100px;
background: blue;
transform: scale(1.5);
}
</style>
<div class="box"></div>