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