Course recommendation:

CSS scale() function

Definition and usage scale() CSS's

scale() The function is used to scale elements (width and height).

scale() The function defines the scaling values of the element in the x and y directions. transform used in properties.

Instance

Example 1

Using scale() Zoom multiple <div> elements:

#myDiv1 {
  transform: scale(0.7);
}
#myDiv2 {
  transform: scale(110%);
}
#myDiv3 {
  transform: scale(1.1, 0.5);
}

Try it yourself

Example 2

Using scale() Zoom image:

#img1 {
  transform: scale(0.7);
}
#img2 {
  transform: scale(110%);
}
#img3 {
  transform: scale(1.1, 0.5);
}

Try it yourself

CSS syntax

scale(sx, sy)
Value Description
sx Required. Number or percentage. Specifies the scaling vector for width.
sy

Optional. Number or percentage. Specifies the scaling vector for height.

If omitted, the value is set to the same as sx.

Technical details

Version: CSS Transforms Module Level 1

Browser support

The numbers in the table indicate the first browser version to fully support 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 scale3d() do CSS

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

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