CSS scaleY() Function

The CSS scaleY() function is used to scale elements in a two-dimensional space along the y-axis.

The scaleY() function scales an element based on the number/s that you provide as an argument.

Because it only scales along the y-axis, the element will be distorted if you use it alone (for example, without also using the scaleX() function to scale the x-axis).

Here's an example of scaling an element using scaleY():

<style>
  .scaled {
    transform-origin: top left;
    transform: scaleY(2);
  }
</style>

<img src="/pix/samples/9s.jpg" alt="Sample image">
<img class="scaled" src="/pix/samples/9s.jpg" alt="Sample image">

Removing `transform-origin`

Scaling an element will usually cause it to overlap other elements on the page. The element takes up the same space within the document flow that it would have if it hadn't been scaled. In other words, other content will flow just as it normally would flow — often resulting in overlapping content.

In the previous example, I use transform-origin to adjust the origin of the transformation. Specifically, I use transform-origin: top left; so that the resized image remains within the viewport after the scaling operation.

The default origin for the rotation is 50% 50% (i.e. the center). Therefore, if we remove this property, the image will transform based on this value.

So here's an example of what the scale operation might look like when using the default transform-origin value.

<style>
  .scaled {
    transform: scaleY(2);
  }
</style>

<img src="/pix/samples/9s.jpg" alt="Sample image">
<img class="scaled" src="/pix/samples/9s.jpg" alt="Sample image">
<p>Some sample text to demonstrate how the resized image fits into the page after the scaling operation.</p>

Overlapping Content - Bring to Front

You can use the z-index property to specify which elements should appear in front when there's overlapping content.

Official Syntax

The official syntax of the scaleY() function is as follows:

Possible Values

The scaleY() function accepts number parameters that define the scaling vector for the scale operation.

A number is either an integer, or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits and optionally an exponent composed of e or E and an integer.

CSS Specifications

The scaleY() function is defined in CSS Transforms Module Level 1 (W3C Working Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.