CSS3 Transforms | The scale() Method

The scale() method increases or decreases the size of an element, according to the parameters given for the width and height.

We have a div element with a width of 200 px and a height of 100 px. On hover the width will increase 1.2 times and the height will increase 1.1 times.

#div8 {
	width: 200px;
	height: 100px;
	background-color: orange;
}
#div8:hover {
	transform: scale(1.5, 1.1);
}

If only one parameter is passed to the scale() method, it will apply that factor for both the height and the width.

Leave a Reply