Skip to content

Add scale3d() CSS transform function entry #7478

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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Add scale3d() CSS transform function entry #7478

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2f24b6b
Add scale3d() CSS transform function entry
Paul-Blankson Aug 15, 2025
920c407
Merge branch 'main' into feature/scale3d-transform-function
Pablo-Devs Aug 15, 2025
096647a
minor fixes
mamtawardhani Aug 22, 2025
e6d37c5
Merge branch 'main' into feature/scale3d-transform-function
mamtawardhani Aug 22, 2025
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
75 changes: 75 additions & 0 deletions content/css/concepts/transform-functions/terms/scale3d/scale3d.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
---
Title: 'scale3d()'
Description: 'Scales an element in 3D space by multiplying its size along the X, Y, and Z axes.'
Subjects:
- 'Web Design'
- 'Web Development'
Tags:
- 'CSS'
- 'Functions'
- 'Positioning'
CatalogContent:
- 'learn-css'
- 'paths/front-end-engineer-career-path'
---

The **`scale3d()`** function in CSS scales an element in 3D space along the X, Y, and Z axes, allowing for three-dimensional transformations.

## Syntax

```pseudo
transform: scale3d(sx, sy, sz);
```

**Parameters:**

- `sx`: A number that scales the element along the X-axis (horizontal).
- `sy`: A number that scales the element along the Y-axis (vertical).
- `sz`: A number that scales the element along the Z-axis (depth).

**Note:** Values greater than 1 increase the size, values between 0 and 1 decrease the size, and negative values flip the element along that axis.

## Example

Scaling a `.cube` element to be twice as wide, half as tall, and three times as deep:

```css
.cube {
transform: scale3d(2, 0.5, 3);
transform-style: preserve-3d;
}
```

## Codebyte Example

```codebyte/css
<!DOCTYPE html>
<html>
<head>
<style>
.container {
perspective: 1000px;
margin: 50px;
}

.cube {
width: 100px;
height: 100px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
transform: scale3d(1.5, 0.8, 2);
transform-style: preserve-3d;
transition: transform 0.3s ease;
}

.cube:hover {
transform: scale3d(2, 1, 3);
}
</style>
</head>
<body>
<div class="container">
<div class="cube"></div>
</div>
</body>
</html>
```