The scaleY() CSS function is a transform function that allows you to scale an element along its vertical axis. When applied, it stretches or compresses the element in the y-direction while keeping its horizontal dimension unchanged. A value of 1 represents the element’s original height, values greater than 1 increase the height, and values between 0 and 1 decrease it. Negative values can flip the element vertically.

This function is often used in combination with other transform functions such as scaleX(), rotate(), or translate() to create more complex transformations. It is applied via the transform property and can be animated with the transition property for smooth visual effects.

For example, if you want a div to appear as if it is growing taller on hover, you could use:

div {
  transform: scaleY(1);
  transition: transform 0.3s ease;
}

div:hover {
  transform: scaleY(1.5);
}

In this case, the div smoothly stretches to 1.5 times its original height when hovered. This technique is commonly used for effects such as dropdown menus, accordion panels, or interactive visualizations where vertical expansion or contraction is desired.

The function is hardware-accelerated in modern browsers, making it efficient for animations compared to directly modifying the height property.