CSS scaleY() Function
Example
Use scaleY() to scale the height of several <div> elements:
#myDiv1 {
transform: scaleY(0.5);
}
#myDiv2 {
transform:
scaleY(70%);
}
#myDiv3 {
transform: scaleY(1.1);
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS scaleY() function is used to scale
an element vertically.
The scaleY() function increases or decreases the
height of an element.
The scaleY() function is used within the
transform property.
| Version: | CSS Transforms Module Level 1 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| scaleY() | 1 | 12 | 3.5 | 3.1 | 10.5 |
CSS Syntax
scaleY(s)
| Value | Description |
|---|---|
| s | Required. A number that specifies the scaling vector for the height |
More Examples
Example
Use scaleY() to scale the height of images:
#img1 {
transform: scaleY(0.5);
}
#img2 {
transform: scaleY(70%);
}
#img3 {
transform: scaleY(-0.5);
}
#img4 {
transform: scaleY(1.1);
}
Try it Yourself »
Related Pages
CSS reference: CSS transform property.
CSS reference: CSS scale property.
CSS reference: CSS scale() function.
CSS reference: CSS scale3d() function.
CSS reference: CSS scaleX() function.
CSS tutorial: CSS 2D transforms.
