The scale() method increases or decreases the size of an element (according to the parameters given for the width and height). Numbers greater than 1 will scale elements larger, while numbers less than 1 will scale elements smaller:
transform: scale(2,3); <---OR---> transform: scale(0.5,0.5);
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
div#big { margin: 150px; width: 200px; height: 100px; background-color: yellow; border: 1px solid black; -ms-transform: scale(2,3); /* IE 9 */ -webkit-transform: scale(2,3); /* Safari */ transform: scale(2,3); /* Standard syntax */ } div#small { margin: 150px; width: 200px; height: 100px; background-color: yellow; border: 1px solid black; -ms-transform: scale(0.5,0.5); /* IE 9 */ -webkit-transform: scale(0.5,0.5); /* Safari */ transform: scale(0.5,0.5); /* Standard syntax */ } </style> <body> <div id="big"> <b>Using Scale(2,3):</b> <br />This div element is two times of its original width, and three times of its original height. </div> <div id="small"> <b>Using Scale(0.5,0.5):</b> <br />This div element is decreased to be half of its original width and height. </div> </body> |
Using Scale(2,3):
This div element is two times of its original width, and three times of its original height.
Using Scale(0.5,0.5):
This div element is decreased to be half of its original width and height. |
