Skip to content

Commit d85044a

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

File tree

4 files changed

+264
-0
lines changed

4 files changed

+264
-0
lines changed

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

Lines changed: 264 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,264 @@
1+
---
2+
Title: 'scaleZ()'
3+
Description: 'Resizes an element along the z-axis in 3D space'
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 **`scaleZ()`** function is a CSS transform function that resizes an element along the z-axis in 3D space. It modifies the depth of an element by scaling its z-coordinate, which is only visible when the element is positioned in a 3D context with perspective applied.
18+
19+
## Syntax
20+
21+
```pseudo
22+
transform: scaleZ(z);
23+
```
24+
25+
**Parameters:**
26+
27+
- `z`: A number or percentage representing the scaling factor to apply along the z-axis. A value of `1` leaves the element unchanged, values greater than `1` increase the depth, and values between `0` and `1` decrease the depth. Negative values create a reflection along the z-axis.
28+
29+
**Return value:**
30+
31+
The `scaleZ()` function returns a `<transform-function>` data type that can be used with the `transform` property.
32+
33+
## Example 1: Basic `scaleZ()` Usage
34+
35+
This example demonstrates basic z-axis scaling with perspective to visualize the effect. The HTML code is:
36+
37+
```html
38+
<!DOCTYPE html>
39+
<html>
40+
<head>
41+
<link rel="stylesheet" href="style.css" />
42+
<title>Basic scaleZ Example</title>
43+
</head>
44+
<body>
45+
<div class="container">
46+
<div class="box original">Original</div>
47+
<div class="box scaled">Scaled Z</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: #f0f0f0;
62+
}
63+
64+
.container {
65+
perspective: 500px;
66+
display: flex;
67+
gap: 50px;
68+
}
69+
70+
.box {
71+
width: 150px;
72+
height: 150px;
73+
background-color: #3498db;
74+
color: white;
75+
display: flex;
76+
justify-content: center;
77+
align-items: center;
78+
font-size: 18px;
79+
font-weight: bold;
80+
}
81+
82+
.original {
83+
transform: rotateY(45deg);
84+
}
85+
86+
.scaled {
87+
transform: rotateY(45deg) scaleZ(2);
88+
background-color: #e74c3c;
89+
}
90+
```
91+
92+
This example results in the following output:
93+
94+
![Two boxes are displayed side by side. The left box (Original) is rotated 45 degrees along the y-axis. The right box (Scaled Z) is rotated 45 degrees and scaled 2x along the z-axis, making it appear stretched in depth when viewed from the perspective angle.](https://raw.githubusercontent.com/Codecademy/docs/main/media/scalez1.png)
95+
96+
## Example 2: 3D Card Flip with `scaleZ()`
97+
98+
This example shows how `scaleZ()` can be used to create depth effects in a 3D card flip animation. The HTML code is:
99+
100+
```html
101+
<!DOCTYPE html>
102+
<html>
103+
<head>
104+
<link rel="stylesheet" href="style.css" />
105+
<title>3D Card Flip</title>
106+
</head>
107+
<body>
108+
<div class="card-container">
109+
<div class="card">
110+
<div class="card-front">Front Side</div>
111+
<div class="card-back">Back Side</div>
112+
</div>
113+
</div>
114+
</body>
115+
</html>
116+
```
117+
118+
The CSS code is:
119+
120+
```css
121+
body {
122+
display: flex;
123+
justify-content: center;
124+
align-items: center;
125+
height: 100vh;
126+
background-color: #2c3e50;
127+
}
128+
129+
.card-container {
130+
perspective: 1000px;
131+
}
132+
133+
.card {
134+
width: 300px;
135+
height: 200px;
136+
position: relative;
137+
transform-style: preserve-3d;
138+
transition: transform 0.6s;
139+
}
140+
141+
.card:hover {
142+
transform: rotateY(180deg);
143+
}
144+
145+
.card-front,
146+
.card-back {
147+
position: absolute;
148+
width: 100%;
149+
height: 100%;
150+
backface-visibility: hidden;
151+
display: flex;
152+
justify-content: center;
153+
align-items: center;
154+
font-size: 24px;
155+
font-weight: bold;
156+
border-radius: 10px;
157+
transform: scaleZ(1.5);
158+
}
159+
160+
.card-front {
161+
background-color: #3498db;
162+
color: white;
163+
}
164+
165+
.card-back {
166+
background-color: #e74c3c;
167+
color: white;
168+
transform: rotateY(180deg) scaleZ(1.5);
169+
}
170+
```
171+
172+
This example results in the following output:
173+
174+
![A card is displayed that flips when hovered. The scaleZ() function adds depth to both the front and back faces of the card, making the 3D flip effect more pronounced and visually appealing.](https://raw.githubusercontent.com/Codecademy/docs/main/media/scalez2.gif)
175+
176+
## Example 3: 3D Image Gallery with `scaleZ()`
177+
178+
This example demonstrates using `scaleZ()` to create a 3D image gallery with depth effects. The HTML code is:
179+
180+
```html
181+
<!DOCTYPE html>
182+
<html>
183+
<head>
184+
<link rel="stylesheet" href="style.css" />
185+
<title>3D Image Gallery</title>
186+
</head>
187+
<body>
188+
<div class="gallery">
189+
<div class="image-box box1">Image 1</div>
190+
<div class="image-box box2">Image 2</div>
191+
<div class="image-box box3">Image 3</div>
192+
</div>
193+
</body>
194+
</html>
195+
```
196+
197+
The CSS code is:
198+
199+
```css
200+
body {
201+
display: flex;
202+
justify-content: center;
203+
align-items: center;
204+
height: 100vh;
205+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
206+
}
207+
208+
.gallery {
209+
perspective: 800px;
210+
display: flex;
211+
gap: 30px;
212+
}
213+
214+
.image-box {
215+
width: 180px;
216+
height: 250px;
217+
display: flex;
218+
justify-content: center;
219+
align-items: center;
220+
color: white;
221+
font-size: 20px;
222+
font-weight: bold;
223+
border-radius: 8px;
224+
transition: transform 0.3s ease;
225+
transform-style: preserve-3d;
226+
}
227+
228+
.box1 {
229+
background-color: #ff6b6b;
230+
transform: rotateY(-15deg) scaleZ(1.2);
231+
}
232+
233+
.box2 {
234+
background-color: #4ecdc4;
235+
transform: scaleZ(1.5);
236+
}
237+
238+
.box3 {
239+
background-color: #ffd93d;
240+
transform: rotateY(15deg) scaleZ(2);
241+
}
242+
243+
.image-box:hover {
244+
transform: rotateY(0deg) scaleZ(2.5) translateZ(50px);
245+
}
246+
```
247+
248+
This example results in the following output:
249+
250+
![Three colored boxes are displayed in a row with different depth levels created by scaleZ(). Each box has a different z-axis scale factor, creating a layered 3D effect.](https://raw.githubusercontent.com/Codecademy/docs/main/media/scalez3.gif)
251+
252+
## Frequently Asked Questions
253+
254+
### 1. What is the z-scale in CSS?
255+
256+
Z scale refers to scaling an element along the z-axis in 3D space, modifying depth. It becomes visible when combined with other 3D transforms and perspective.
257+
258+
### 2. What does transform scale do in CSS?
259+
260+
Transform scale resizes elements along different axes. While `scale()`, `scaleX()`, and `scaleY()` work in 2D, `scaleZ()` scales along the z-axis in 3D space.
261+
262+
### 3. What is the z-scale used for?
263+
264+
The Z scale is used for creating 3D effects like card flips, interactive galleries, parallax effects, and depth-based animations when combined with other 3D transforms.

‎media/scalez1.png‎

8.95 KB
Loading

‎media/scalez2.gif‎

344 KB
Loading

‎media/scalez3.gif‎

399 KB
Loading

0 commit comments

Comments
 (0)