The scale function
The scale function scales an element:
increases or decreases it several times. Scaling
is performed around the point specified by the
transform-origin
property.
It can accept one or two parameters, listed separated by commas. If there are two parameters, the first parameter specifies horizontal scaling, and the second - vertical scaling. If there is single parameter, it specifies horizontal and vertical scaling simultaneously.
The value of the parameters is an integer or
fractional number. If it is greater than
1 - the element increases, if it is
less (for example, 0.5) - the element
decreases. If you set 1 - nothing will
change (this is the default value).
Syntax
selector {
transform: scale(one or two numbers);
}
Example
When hovering over a block, we will increase
the scale by 1.5 times on both axes:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1.5);
}
:
Example
Let's reduce the scale by 2
times along both axes:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(0.5);
}
:
Example
Let's increase the scale by 2
times along the X-axis:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(2, 1);
}
:
Example
Let's increase the scale by 2
times along the Y-axis:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1, 2);
}
:
