scaleX function
The scaleX function scales an element
along the X-axis. Scaling is performed around
the point specified by the
transform-origin
property. The function value is an integer
or fractional number. If it is greater than
1, the element increases in size; 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: scaleX(number);
}
Example
When hovering over a block, we will increase
the scale by 1.5 times along the X-axis:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scaleX(1.5);
}
:
Example
When hovering over a block, we will reduce
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: scaleX(0.5);
}
: