CSS - Transform scale

Specifies a 2D scaling operation described by scale([scaleX, scaleY]). If scaleY isn't specified, it is assumed to be equal to scaleX. MDN Transform scale

scale factor in x direction
scale factor in y direction
0
870

Implementation with vendor prefixes borrowed from CSS3 Please!

Uniform scaling
.scale-uniform {
  -webkit-transform: scale({{scaleX}});  /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: scale({{scaleX}});  /* IE 9  */
          transform: scale({{scaleX}});  /* Firefox 16+, IE 10+, Opera  */
}
css
Bi-directional scaling
.scale-bi-directional {
  -webkit-transform: scale({{scaleX}}, {{scaleY}});  /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: scale({{scaleX}}, {{scaleY}});  /* IE 9  */
          transform: scale({{scaleX}}, {{scaleY}});  /* Firefox 16+, IE 10+, Opera  */
}
css
Horizontal stretching
.scale-horizontal {
  -webkit-transform: scaleX({{scaleX}});  /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: scaleX({{scaleX}});  /* IE 9  */
          transform: scaleX({{scaleX}});  /* Firefox 16+, IE 10+, Opera  */
}
css
Vertical stretching
.scale-vertical {
  -webkit-transform: scaleY({{scaleY}});  /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: scaleY({{scaleY}});  /* IE 9  */
          transform: scaleY({{scaleY}});  /* Firefox 16+, IE 10+, Opera  */
}
css

Notes

last update: