Skip to content
This repository was archived by the owner on Feb 27, 2026. It is now read-only.

Commit 66c910d

Browse files
Tukesh1Tukesh1
authored
[Term Entry] CSS Transform Functions: translateZ()
* Added CSS translateZ() transform function documentation * Update translateZ.md * added HTML code and output gif * Fixed examples and actual output image * minor fixes * Minor changes ---------
1 parent ad664fd commit 66c910d

3 files changed

Lines changed: 174 additions & 0 deletions

File tree

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

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
---
2+
Title: 'translateZ()'
3+
Description: 'Moves an element along the Z-axis in 3D space.'
4+
Subjects:
5+
- 'Web Design'
6+
- 'Web Development'
7+
Tags:
8+
- 'Functions'
9+
- 'Positioning'
10+
CatalogContent:
11+
- 'learn-css'
12+
- 'paths/front-end-engineer-career-path'
13+
---
14+
15+
In CSS, the **`translateZ()`** function moves an element along the Z-axis in 3D space, creating depth by moving the element closer to or farther from the viewer. For this effect to be visible, the element or its parent must have a `perspective` property set.
16+
17+
## Syntax
18+
19+
```pseudo
20+
transform: translateZ(<length>);
21+
```
22+
23+
The required `<length>` value can use any valid CSS length unit, such as `px`, `em`, `rem`, `cm`, etc.
24+
25+
- A positive value moves the element closer to the viewer.
26+
- A negative value moves the element farther away.
27+
28+
> **Note:** Percentage values are not supported because the Z-axis has no intrinsic size reference like width or height.
29+
30+
The `perspective` property is essential for `translateZ()` to have a visible effect. Without a `perspective` defined, `translateZ()` still applies but appears visually the same as a 2D transform, so no depth is perceived.
31+
32+
Perspective can be applied on a parent container:
33+
34+
```css
35+
.container {
36+
perspective: 300px;
37+
}
38+
```
39+
40+
Or, within the transform using:
41+
42+
```css
43+
transform: perspective(300px) translateZ(100px);
44+
```
45+
46+
## Example 1
47+
48+
In this example, an element with a `.effected-box` class is moved `100px` closer to the viewer:
49+
50+
```html
51+
<!DOCTYPE html>
52+
<html>
53+
<head>
54+
<title>CSS translateZ() function</title>
55+
<style>
56+
body {
57+
text-align: center;
58+
padding: 30px;
59+
font-family: Arial, sans-serif;
60+
}
61+
.boxes {
62+
display: flex;
63+
justify-content: center;
64+
gap: 90px;
65+
margin: 60px 0;
66+
}
67+
.box {
68+
width: 150px;
69+
height: 150px;
70+
background: #3498db;
71+
display: flex;
72+
align-items: center;
73+
justify-content: center;
74+
color: white;
75+
font-weight: bold;
76+
}
77+
.label {
78+
font-size: 16px;
79+
font-weight: bold;
80+
margin-top: 45px;
81+
}
82+
/* translateZ(+100px) - moves element closer, makes it look bigger */
83+
.closer-box {
84+
transform: perspective(300px) translateZ(+100px);
85+
}
86+
/* Normal position, no movement on Z-axis */
87+
.original-box {
88+
background: #95a5a6;
89+
}
90+
</style>
91+
</head>
92+
<body>
93+
<div class="boxes">
94+
<div class="box-container">
95+
<div class="box original-box">Before</div>
96+
<div class="label">translateZ(0)<br /><small>Default state</small></div>
97+
</div>
98+
<div class="box-container">
99+
<div class="box closer-box">After</div>
100+
<div class="label">translateZ(+100px)<br /><small>Applied</small></div>
101+
</div>
102+
</div>
103+
</body>
104+
</html>
105+
```
106+
107+
The element appears larger because it's moved closer to the viewer:
108+
109+
![Positive translateZ example](https://raw.githubusercontent.com/Codecademy/docs/main/media/css-translateZ-pos.png)
110+
111+
## Example 2
112+
113+
In this example, an element with a `.effected-box` class is moved away from the viewer by `-100px`:
114+
115+
```html
116+
<!DOCTYPE html>
117+
<html>
118+
<head>
119+
<title>CSS translateZ() function</title>
120+
<style>
121+
body {
122+
text-align: center;
123+
padding: 30px;
124+
font-family: Arial, sans-serif;
125+
}
126+
.boxes {
127+
display: flex;
128+
justify-content: center;
129+
gap: 80px;
130+
margin: 60px 0;
131+
}
132+
.box {
133+
width: 150px;
134+
height: 150px;
135+
background: #3498db;
136+
display: flex;
137+
align-items: center;
138+
justify-content: center;
139+
color: white;
140+
font-weight: bold;
141+
}
142+
.label {
143+
font-size: 16px;
144+
font-weight: bold;
145+
margin-top: 45px;
146+
}
147+
/* translateZ(-100px) - moves element farther, makes it look smaller */
148+
.effected-box {
149+
transform: perspective(300px) translateZ(-100px);
150+
}
151+
/* Normal position, no movement on Z-axis */
152+
.original-box {
153+
background: #95a5a6;
154+
}
155+
</style>
156+
</head>
157+
<body>
158+
<div class="boxes">
159+
<div class="box-container">
160+
<div class="box original-box">Before</div>
161+
<div class="label">translateZ(0)<br /><small>Default state</small></div>
162+
</div>
163+
<div class="box-container">
164+
<div class="box effected-box">After</div>
165+
<div class="label">translateZ(-100px)<br /><small>Applied</small></div>
166+
</div>
167+
</div>
168+
</body>
169+
</html>
170+
```
171+
172+
The element appears smaller because it's moved farther from the viewer:
173+
174+
![Negative translateZ example](https://raw.githubusercontent.com/Codecademy/docs/main/media/css-translateZ-neg.png)

‎media/css-translateZ-neg.png‎

61 KB
Loading

‎media/css-translateZ-pos.png‎

79.3 KB
Loading

0 commit comments

Comments
 (0)