scaleY()

The scaleY() function is used to scale an element up or down, making it appear bigger or smaller, in the direction of the y-axis.

It takes a unitless <number> sy as a value, which is used to scale the element’s size along the y-axis.

If the value provided is greater than one, the element is scaled up—it will look bigger along the y-axis. If the value is equal to one, the element stays unchanged in that direction. If the value is between zero and one exclusively, the element is scaled down along the y-axis. If the value is zero, the element disappears. Negative values are allowed, but they don’t scale the element. In fact, they cause the transformed element to be flipped vertically (as if it were rotated along the x-axis)!

Examples:

transform: scaleY(2); /* scales the element to twice its size along the y-axis */
transform: scaleY(1); /* element is unchanged */
transform: scaleY(0.25); /* scales the element along the y-axis to quarter its size */
transform: scaleY(-1); /* flips the element along the y-axis */
                

See the scale() value in the transform entry to see how a negative value flips an element when applied using scaleY().

The official syntax looks as follows:

transform: scaleY(<number>);
                

For a better understanding of the transform functions, please refer to the transform entry.