Skip to content

Add translateZ() term entry #8260

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
nattg89 wants to merge 2 commits into from
Closed

Add translateZ() term entry #8260

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6f13b9a
Add translateZ() term entry
nattg89 Feb 23, 2026
17894ab
Merge branch 'main' into main
nattg89 Feb 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 16 additions & 157 deletions content/css/concepts/transform-functions/terms/translateZ/translateZ.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,174 +1,33 @@
---
Title: 'translateZ()'
Description: 'Moves an element along the Z-axis in 3D space.'
Subjects:
- 'Web Design'
- 'Web Development'
Tags:
- 'Functions'
- 'Positioning'
CatalogContent:
- 'learn-css'
- 'paths/front-end-engineer-career-path'
---

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.
## Definition
The `translateZ()` CSS transform function moves an element along the **Z-axis**, which is perpendicular to the screen. Positive values move the element **closer to the viewer**, while negative values move it **farther away**. This function is used to create depth in 3D transforms and works best when a `perspective` value is applied to the element or its parent.

## Syntax

```pseudo
```css
transform: translateZ(<length>);
```

The required `<length>` value can use any valid CSS length unit, such as `px`, `em`, `rem`, `cm`, etc.

- A positive value moves the element closer to the viewer.
- A negative value moves the element farther away.
### Parameters
- **`<length>`**
A CSS length value such as `px`, `em`, or `rem`.
- Positive values move the element **toward** the viewer.
- Negative values move it **away**.

> **Note:** Percentage values are not supported because the Z-axis has no intrinsic size reference like width or height.
> **Note:** Percentage values are not supported because the Z-axis has no reference dimension.

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.

Perspective can be applied on a parent container:
## Example

```css
.container {
perspective: 300px;
}
```

Or, within the transform using:

```css
transform: perspective(300px) translateZ(100px);
```

## Example 1

In this example, an element with a `.effected-box` class is moved `100px` closer to the viewer:

```html
<!DOCTYPE html>
<html>
<head>
<title>CSS translateZ() function</title>
<style>
body {
text-align: center;
padding: 30px;
font-family: Arial, sans-serif;
}
.boxes {
display: flex;
justify-content: center;
gap: 90px;
margin: 60px 0;
}
.box {
width: 150px;
height: 150px;
background: #3498db;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.label {
font-size: 16px;
font-weight: bold;
margin-top: 45px;
}
/* translateZ(+100px) - moves element closer, makes it look bigger */
.closer-box {
transform: perspective(300px) translateZ(+100px);
}
/* Normal position, no movement on Z-axis */
.original-box {
background: #95a5a6;
}
</style>
</head>
<body>
<div class="boxes">
<div class="box-container">
<div class="box original-box">Before</div>
<div class="label">translateZ(0)<br /><small>Default state</small></div>
</div>
<div class="box-container">
<div class="box closer-box">After</div>
<div class="label">translateZ(+100px)<br /><small>Applied</small></div>
</div>
</div>
</body>
</html>
```

The element appears larger because it's moved closer to the viewer:

![Positive translateZ example](https://raw.githubusercontent.com/Codecademy/docs/main/media/css-translateZ-pos.png)

## Example 2

In this example, an element with a `.effected-box` class is moved away from the viewer by `-100px`:

```html
<!DOCTYPE html>
<html>
<head>
<title>CSS translateZ() function</title>
<style>
body {
text-align: center;
padding: 30px;
font-family: Arial, sans-serif;
}
.boxes {
display: flex;
justify-content: center;
gap: 80px;
margin: 60px 0;
}
.box {
width: 150px;
height: 150px;
background: #3498db;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.label {
font-size: 16px;
font-weight: bold;
margin-top: 45px;
}
/* translateZ(-100px) - moves element farther, makes it look smaller */
.effected-box {
transform: perspective(300px) translateZ(-100px);
}
/* Normal position, no movement on Z-axis */
.original-box {
background: #95a5a6;
}
</style>
</head>
<body>
<div class="boxes">
<div class="box-container">
<div class="box original-box">Before</div>
<div class="label">translateZ(0)<br /><small>Default state</small></div>
</div>
<div class="box-container">
<div class="box effected-box">After</div>
<div class="label">translateZ(-100px)<br /><small>Applied</small></div>
</div>
</div>
</body>
</html>
```

The element appears smaller because it's moved farther from the viewer:

![Negative translateZ example](https://raw.githubusercontent.com/Codecademy/docs/main/media/css-translateZ-neg.png)
.box {
width: 150px;
height: 150px;
background-color: coral;
transform: translateZ(50px);
}