Skip to content

Commit b2566bc

Browse files
mamtawardhanimamtawardhani
authored
[Term Entry] CSS Transform function: scaleY() (#7709)
* [Edit] Python: Python CLI arguments * Update command-line-arguments.md * [Term Entry] CSS Transform function: scaleY() * Add files via upload * Update content/css/concepts/transform-functions/terms/scaleY/scaleY.md * Update content/css/concepts/transform-functions/terms/scaleY/scaleY.md * Update content/css/concepts/transform-functions/terms/scaleY/scaleY.md ---------
1 parent d85044a commit b2566bc

File tree

4 files changed

+233
-0
lines changed

4 files changed

+233
-0
lines changed

‎content/css/concepts/transform-functions/terms/scaleY/scaleY.md‎

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
---
2+
Title: 'scaleY()'
3+
Description: 'Resizes an element along the y-axis.'
4+
Subjects:
5+
- 'Web Design'
6+
- 'Web Development'
7+
Tags:
8+
- 'Animation'
9+
- 'CSS'
10+
- 'Functions'
11+
- 'Transform'
12+
CatalogContent:
13+
- 'learn-css'
14+
- 'paths/front-end-engineer-career-path'
15+
---
16+
17+
The **`scaleY()`** function is a CSS transform function that resizes an element along the y-axis. It modifies the height of an element by scaling its vertical dimension.
18+
19+
## Syntax
20+
21+
```pseudo
22+
transform: scaleY(y);
23+
```
24+
25+
**Parameters:**
26+
27+
- `y`: A number or percentage representing the scaling factor to apply along the y-axis. A value of `1` leaves the element unchanged, values greater than `1` increase the height, and values between `0` and `1` decrease the height. Negative values create a vertical reflection.
28+
29+
**Return value:**
30+
31+
The `scaleY()` function returns a `<transform-function>` data type that can be used with the `transform` property.
32+
33+
## Example 1: Scaling a Box Vertically
34+
35+
In this example, the height of a box is scaled along the y-axis to create a stretched effect. The HTML code is:
36+
37+
```html
38+
<!DOCTYPE html>
39+
<html>
40+
<head>
41+
<link rel="stylesheet" href="style.css" />
42+
<title>ScaleY Box Example</title>
43+
</head>
44+
<body>
45+
<div class="container">
46+
<div class="box small">Small</div>
47+
<div class="box tall">Tall</div>
48+
</div>
49+
</body>
50+
</html>
51+
```
52+
53+
The CSS code is:
54+
55+
```css
56+
body {
57+
display: flex;
58+
justify-content: center;
59+
align-items: center;
60+
height: 100vh;
61+
background-color: #f8f8f8;
62+
}
63+
64+
.container {
65+
display: flex;
66+
gap: 40px;
67+
}
68+
69+
.box {
70+
width: 120px;
71+
height: 120px;
72+
background-color: #3498db;
73+
color: white;
74+
display: flex;
75+
justify-content: center;
76+
align-items: center;
77+
font-size: 16px;
78+
font-weight: bold;
79+
}
80+
81+
.small {
82+
transform: scaleY(0.8);
83+
background-color: #2ecc71;
84+
}
85+
86+
.tall {
87+
transform: scaleY(1.8);
88+
background-color: #e67e22;
89+
}
90+
```
91+
92+
This example results in the following output:
93+
94+
![Two boxes displayed side by side. The left box labeled ‘Original’ is normal height, while the right box labeled ‘Scaled Y’ is stretched taller along the vertical axis, showing the effect of scaleY.](https://raw.githubusercontent.com/Codecademy/docs/main/media/scaleY1.png)
95+
96+
## Example 2: Animated Button Grow on Hover
97+
98+
In this example, a button grows taller along the y-axis when hovered over. The HTML code is:
99+
100+
```html
101+
<!DOCTYPE html>
102+
<html>
103+
<head>
104+
<link rel="stylesheet" href="style.css" />
105+
<title>ScaleY Button Animation</title>
106+
</head>
107+
<body>
108+
<button class="btn">Hover Me</button>
109+
</body>
110+
</html>
111+
```
112+
113+
The CSS code is:
114+
115+
```css
116+
body {
117+
display: flex;
118+
justify-content: center;
119+
align-items: center;
120+
height: 100vh;
121+
background-color: #ecf0f1;
122+
}
123+
124+
.btn {
125+
width: 150px;
126+
height: 50px;
127+
font-size: 18px;
128+
font-weight: bold;
129+
background-color: #3498db;
130+
color: white;
131+
border: none;
132+
border-radius: 8px;
133+
transition: transform 0.4s ease;
134+
}
135+
136+
.btn:hover {
137+
transform: scaleY(1.5);
138+
}
139+
```
140+
141+
This example results in the following output:
142+
143+
![A 3D card displayed that flips when hovered. The front and back faces are scaled taller along the Y-axis, enhancing the vertical depth effect during the flip animation.](https://raw.githubusercontent.com/Codecademy/docs/main/media/scaleY2.gif)
144+
145+
## Example 3: Image Column Stack with Vertical Scaling
146+
147+
In this example, images are stacked and scaled vertically to create a layered effect. The HTML code is:
148+
149+
```html
150+
<!DOCTYPE html>
151+
<html>
152+
<head>
153+
<link rel="stylesheet" href="style.css" />
154+
<title>Vertical Image Stack</title>
155+
</head>
156+
<body>
157+
<div class="image-stack">
158+
<div class="image-box box1">1</div>
159+
<div class="image-box box2">2</div>
160+
<div class="image-box box3">3</div>
161+
</div>
162+
</body>
163+
</html>
164+
```
165+
166+
The CSS code is:
167+
168+
```css
169+
body {
170+
display: flex;
171+
justify-content: center;
172+
align-items: flex-end;
173+
height: 100vh;
174+
background: linear-gradient(120deg, #6a11cb, #2575fc);
175+
}
176+
177+
.image-stack {
178+
display: flex;
179+
gap: 20px;
180+
align-items: flex-end;
181+
}
182+
183+
.image-box {
184+
width: 80px;
185+
height: 80px;
186+
background-color: #ff6b6b;
187+
display: flex;
188+
justify-content: center;
189+
align-items: center;
190+
color: white;
191+
font-size: 18px;
192+
font-weight: bold;
193+
border-radius: 6px;
194+
transition: transform 0.3s ease;
195+
}
196+
197+
.box1 {
198+
transform: scaleY(1.1);
199+
background-color: #ff6b6b;
200+
}
201+
202+
.box2 {
203+
transform: scaleY(1.5);
204+
background-color: #4ecdc4;
205+
}
206+
207+
.box3 {
208+
transform: scaleY(2);
209+
background-color: #ffd93d;
210+
}
211+
212+
.image-box:hover {
213+
transform: scaleY(2.3);
214+
}
215+
```
216+
217+
This example results in the following output:
218+
219+
![Three colored boxes arranged in a row with different vertical scales using scaleY. Each box has a distinct height, creating a layered 3D vertical effect, and they grow taller when hovered.](https://raw.githubusercontent.com/Codecademy/docs/main/media/scaleY3.gif)
220+
221+
## Frequently Asked Questions
222+
223+
### 1. What is the transform scale in CSS?
224+
225+
Transform scale resizes elements along different axes. `scaleY()` specifically scales the element vertically.
226+
227+
### 2. What does transform translateY(-50%) mean?
228+
229+
It moves an element up by 50% of its own height relative to its current position.
230+
231+
### 3. What is scaleY?
232+
233+
ScaleY is a CSS transform that stretches or compresses an element along the vertical axis.

‎media/scaleY1.png‎

4.28 KB
Loading

‎media/scaleY2.gif‎

150 KB
Loading

‎media/scaleY3.gif‎

188 KB
Loading

0 commit comments

Comments
 (0)