CSS scaleY() function

Definition and usage

CSS scaleY() function used for vertical scaling of elements.

scaleY() function to increase or decrease the height of the element.

scaleY() function in transform used in the attribute.

Example

Example 1

Use scaleY() Scale the height of multiple <div> elements:

#myDiv1 {
  transform: scaleY(0.5);
}
#myDiv2 {
  transform: scaleY(70%);
}
#myDiv3 {
  transform: scaleY(1.1);
}

Try it yourself

Example 2

Use scaleY() Scale the height of the image:

#img1 {
  transform: scaleY(0.5);
}
#img2 {
  transform: scaleY(70%);
}
#img3 {
  transform: scaleY(-0.5);
}
#img4 {
  transform: scaleY(1.1);
}

Try it yourself

CSS syntax

scaleY(s)
Value Description
s Required. Specify the number for the height scaling vector.

Technical details

Version: CSS Transforms Module Level 1

Browser support

The numbers in the table indicate the browser version that first fully supports this function.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Related pages

Tutorial:CSS 2D Transformation

Reference:CSS transform attribute

Reference:CSS scale property

Reference:CSS scale() function

Reference:CSS scale3d() function

Reference:CSS scaleX() function