CSS scaleY() function

Definition and usage

CSS's scaleY() The function is used to vertically scale elements.

scaleY() increases or decreases the height of the element.

scaleY() The function in transform Used in the attribute.

Example

Example 1

Use scaleY() Zoom 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() Zoom 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:Transformação 2D do CSS

Referência:Propriedade transform do CSS

Referência:A propriedade CSS scale

Referência:Função scale() do CSS

Referência:Função scale3d() do CSS

Referência:Função scaleX() do CSS