CSS - Transform scale
Specifies a 2D scaling operation described by
scale([scaleX, scaleY])
. IfscaleY
isn't specified, it is assumed to be equal toscaleX
. MDN Transform scale
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 */
}
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 */
}
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 */
}
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 */
}