scaleY() CSS Function

Description

The CSS scaleY() function is used to scale elements in a two-dimensional space along the y-axis. It takes a single parameter, which is a number representing the scaling factor. A value of 1 will not scale the element at all, while a value of 2 will double its height, and a value of 0.5 will halve its height.

The scaleY() function can be used to create a variety of effects, such as:

• Making an element taller or shorter
• Animating an element to grow or shrink
• Creating a zoom effect
• Creating a perspective effect

Here is an example of how to use the scaleY() function:

.my-element {
  transform: scaleY(2);
}

This will make the .my-element element twice as tall as it originally was.

The scaleY() function can be combined with other transform functions, such as scaleX(), translateX(), and translateY(), to create even more complex effects.

Here is an example of how to use the scaleY() function in combination with other transform functions to create a perspective effect:

.my-element {
  transform: perspective(500px) scaleY(0.5);
}

This will make the .my-element element appear to be further away from the viewer, as if it is smaller and deeper in the scene.

Syntax

scaleY() = transform: scaleY(<number>);

Values

• <number>The value is a positive or negative number.
  - a value greater than 1 (for example: 1.5) increases the scale;
  - a value less than 1 (for example: 0.8) reduces the scale;
  - a negative value (for example: -1) mirrors the element vertically;
  - a value of 1 leaves the element size unchanged and does not give a visible effect.

Example

<img class="scaleY" src="images/nature.jpg" alt="Nature Image">

.scaleY {

    transform: scaleY(0.5);

}

Browser Support

The following table will show you the current browser support for the CSS scaleY() function.

Desktop
12	1	3.5	10.1	3.5

Tablets / Mobile
18	4	11	3.2	1	2

Last updated by CSSPortal on: 7th October 2023