CSS3 2D Transforms: Scale Property
Here is the brief description of how to increase or decrease the size of a 2D element in CSS3 according to the given width and height parameters using the CSS3 scale() method.
Explanation
Property :
scale()Usage:
transform: scale(2,3);
Definition:
The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).
It takes the following values.
- width : Specifies the width of an element.
- height : Specifies the height of an element.
Example:
<style>
.demodiv{
width: 250px;
height: 50px;
background-color: #9AFE2E;
border: 1px solid black;
transform: scale(1,2);
-ms-transform: scale(1,2); /* IE 9 */
-webkit-transform: scale(1,2); /* Safari */
}
</style>
<br> <div class='demodiv'>
This is an example for 2D Transform Scale() property.
</div>
.demodiv{
width: 250px;
height: 50px;
background-color: #9AFE2E;
border: 1px solid black;
transform: scale(1,2);
-ms-transform: scale(1,2); /* IE 9 */
-webkit-transform: scale(1,2); /* Safari */
}
</style>
<br> <div class='demodiv'>
This is an example for 2D Transform Scale() property.
</div>
Result:
This is an example for 2D Transform Scale() property.
