css-transform-scale

by VIvek Vaishnav

HTML

<div class="content">
<h3>
Original Image
</h3>
<img src="https://4.bp.blogspot.com/-K-pzSwj0x0o/WX1PfwJMvOI/AAAAAAAAAg8/NWGN-kaG9JYzWsTp1fZfGwr9GwxMqyM6wCLcBGAs/s1600/example.jpg">
</div>

<div class="content">
<h3>
Image scaled on X and Y axis
</h3>
<img class="scalexy" src="https://4.bp.blogspot.com/-K-pzSwj0x0o/WX1PfwJMvOI/AAAAAAAAAg8/NWGN-kaG9JYzWsTp1fZfGwr9GwxMqyM6wCLcBGAs/s1600/example.jpg">
</div>

<div class="content">
<h3>
Image scaled on X axis only
</h3>
<img class="scalex" src="https://4.bp.blogspot.com/-K-pzSwj0x0o/WX1PfwJMvOI/AAAAAAAAAg8/NWGN-kaG9JYzWsTp1fZfGwr9GwxMqyM6wCLcBGAs/s1600/example.jpg">
</div>

<div class="content">
<h3>
Image scaled on Y axis only
</h3>
<img class="scaley" src="https://4.bp.blogspot.com/-K-pzSwj0x0o/WX1PfwJMvOI/AAAAAAAAAg8/NWGN-kaG9JYzWsTp1fZfGwr9GwxMqyM6wCLcBGAs/s1600/example.jpg">
</div>

<div class="content">
<h3>
Image scaled on Z axis only
</h3>
<img class="scalez" src="https://4.bp.blogspot.com/-K-pzSwj0x0o/WX1PfwJMvOI/AAAAAAAAAg8/NWGN-kaG9JYzWsTp1fZfGwr9GwxMqyM6wCLcBGAs/s1600/example.jpg">
</div>

<div class="content">
<h3>
Image scaled on X, Y and Z axis
</h3>
<img class="scalexyz" src="https://4.bp.blogspot.com/-K-pzSwj0x0o/WX1PfwJMvOI/AAAAAAAAAg8/NWGN-kaG9JYzWsTp1fZfGwr9GwxMqyM6wCLcBGAs/s1600/example.jpg">
</div>

CSS

.content{width:auto; height: auto; background: #ccc; display:block; float:left; margin:5px}
h3{text-align:center; background:#f9f393}
.scalexy{transform: scale(0.5,0.7);}
.scalex{transform: scaleX(0.4);}
.scaley{transform: scaleY(0.8);}
.scalez{transform: scaleZ(5);}
.scalexyz{transform: scale3d(0.7,0.8,0.4);}