##CSS3 transform scale
The scale function is used to scale elements in proportion to the original size. The scale(1) value is the original size, scale(0.5) will be half the size, and scale(2) will be double the original size.
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>CSS3 transform scale </title> | |
<link href="style.css" rel="stylesheet"/> | |
</head> | |
<body> | |
<h2>transform: scale(2,2)</h2> | |
<div class="transformFour"> | |
<h2>.transformFour</h2> | |
<img src="AngularJS-Shield.svg"/> | |
</div> | |
<h2>transform: scale(2,1)</h2> | |
<div class="transformFive"> | |
<h2>.transformFive</h2> | |
<img src="AngularJS-Shield.svg"/> | |
</div> | |
</body> | |
</html> |
.transformFour > img { | |
margin : 0px; | |
} | |
.transformFour img:hover { | |
-webkit-transform : scale(2, 2); | |
transform : scale(2, 2); | |
} | |
.transformFive > img { | |
margin-left : 0px; | |
} | |
.transformFive img:hover { | |
-webkit-transform : scale(2, 1); | |
transform : scale(2, 1); | |
} |