Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
A scale transform the element by using y-axis with CSS3
The scaleY() CSS function is used to scale an element along the y-axis (vertically). This transform function stretches or compresses the element's height while keeping its width unchanged.
Syntax
transform: scaleY(y);
Here, y is a number representing the scaling factor to apply on the vertical axis of the element.
Possible Values
| Value | Description |
|---|---|
1 |
No scaling (original size) |
> 1 |
Stretches the element vertically |
0 to 1 |
Compresses the element vertically |
0 |
Completely flattens the element |
negative |
Flips and scales the element |
Example: Vertical Scaling
The following example demonstrates how to scale elements along the y-axis −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
margin: 20px;
display: inline-block;
text-align: center;
line-height: 100px;
color: white;
font-weight: bold;
}
.scale-half {
transform: scaleY(0.5);
background-color: #e74c3c;
}
.scale-double {
transform: scaleY(2);
background-color: #2ecc71;
}
</style>
</head>
<body>
<div class="box">Original</div>
<div class="box scale-half">0.5x</div>
<div class="box scale-double">2x</div>
</body>
</html>
Three boxes appear: a blue original box (100px height), a red compressed box (50px height), and a green stretched box (200px height). All boxes maintain their 100px width.
Conclusion
The scaleY() function provides precise control over vertical scaling. Values less than 1 compress the element, while values greater than 1 stretch it vertically, making it useful for creating dynamic visual effects.
Updated on: 2026-03-15T12:01:23+05:30
410 Views
Advertisements