Using CSS3 property transform, elements can be translated, rotated, scaled and skewed in two or three dimensional space. This tutorial will covered scaling an element using CSS transform (2D) scale, scaleX, scaleY. Also note that when an element is scaled, it does not impact the placement of other elements in layout and may end up some gaps/overlap with other elements.
CSS Syntax:
transform:scale(1.5, 1.1); transform:scaleX(1.5); transform:scaleY(1.5);
Example – transform scale
<style type="text/css">
.outer {
width: 200px; height:100px; background-color:lightgray;
}
.box1 {
width: 100px; height:50px; background-color:green;
transform: scale(1.2, 0.8);
}
.box2 {
width: 100px; height:50px; background-color:lightblue;
}
</style>
<div class="outer">
<div class="box1">scale(1.2, 0.8)</div>
<div class="box2">normal</div>
</div>
Example – transform scaleX and scaleY
<style type="text/css">
.outer {
width: 200px; height:150px; background-color:lightgray;
}
.box1 {
width: 100px; height:50px; background-color:green;
transform: scaleX(1.2);
}
.box2 {
width: 100px; height:50px; background-color:lightblue;
transform: scaleY(0.8);
}
.box3 {
width: 100px; height:50px; background-color:lightgreen;
}
</style>
<div class="outer">
<div class="box1">scaleX(1.2)</div>
<div class="box2">scaleY(0.8)</div>
<div class="box3">normal</div>
</div>Specification and Browser compatibility
| Specification | Status | Categories |
|---|---|---|
| CSS3 2D Transforms | W3C Working Draft | CSS3 |
| Chrome | Firefox | IE | Edge | Safari | Opera |
|---|---|---|---|---|---|
| Yes 36+ | Yes 16+ | Yes 10+ | Yes 12+ | Yes 9+ | Yes 12.1+ |
| Android Chrome | Android Firefox | iOS Safari | IE Mobile | Opera Mobile |
|---|---|---|---|---|
| Yes 47+ | Yes 44+ | Yes 9.0-9.2+ | Yes 10+ | Yes 11+ |
source: caniuse.com
