Site menu

CodeCook.io

  • Languages
    • C
    • C++
    • CSS
    • Git
    • HTML
    • Java
    • JavaScript
    • jQuery
    • PHP
    • Python
    • Ruby
    • Scala
  • scale
  • stretch
  • transform

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
  • Share on Facebook
  • Share on Google+
  • Share on Twitter

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: Nov. 11, 2014

Advertisement

This project is hosted on DigitalOcean, try it and support us

Related concept

  • Transform rotate

Random task

  • Add user to group
  • Test whether AngularJS element is visible in Jasmine test
  • Inline conditional
  • Add public SSH key to remote server
  • Get element from map
  • Blog
  • About
  • License