---
id: css-3d-transforms
title: "CSS 3D Transforms"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["rotateX()", "rotateY()", "rotateZ()", "CSS 3D transform", "3D rotation", "perspective"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.88
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "transform", "3d-transform", "rotate"]
raw_sources: ["https://www.w3schools.com/css/css3_3dtransforms.asp"]
applied_in: []
github_commit: ""
---

# [[CSS 3D Transforms]]

## 🎯 한 줄 통찰 (One-line insight)
CSS 3D transforms let you rotate an element around its X-, Y-, or Z-axis using `rotateX()`, `rotateY()`, and `rotateZ()`, extending the `transform` property into three-dimensional space. [S1]

## 🧠 핵심 개념 (Core concepts)
- **`transform` property** — applies a 2D or 3D transformation to an element. [S1]
- **`rotateX()`** — rotates an element around its X-axis at a given degree. [S1]
- **`rotateY()`** — rotates an element around its Y-axis at a given degree. [S1]
- **`rotateZ()`** — rotates an element around its Z-axis at a given degree. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Axis-specific rotation** — pick the function by axis (`rotateX`/`rotateY`/`rotateZ`) and pass an angle in degrees. [S1]
- **Property + function pairing** — 3D effects combine the `transform` property with dedicated 3D functions, plus supporting properties such as `perspective`, `transform-style`, and `backface-visibility`. [S1]

## 📖 세부 내용 (Details)
**The CSS `rotateX()` Function**
The `rotateX()` function rotates an element around its X-axis at a given degree: [S1]
```css
#myDiv {
  transform: rotateX(150deg);
}
```

**The CSS `rotateY()` Function**
The `rotateY()` function rotates an element around its Y-axis at a given degree: [S1]
```css
#myDiv {
  transform: rotateY(150deg);
}
```

**The CSS `rotateZ()` Function**
The `rotateZ()` function rotates an element around its Z-axis at a given degree: [S1]
```css
#myDiv {
  transform: rotateZ(90deg);
}
```

**CSS Transform Properties**
The following table lists the CSS transform properties: [S1]

| Property | Description |
|----------|-------------|
| `transform` | Applies a 2D or 3D transformation to an element |
| `transform-origin` | Allows you to change the position on transformed elements |
| `transform-style` | Specifies how nested elements are rendered in 3D space |
| `perspective` | Specifies the perspective on how 3D elements are viewed |
| `perspective-origin` | Specifies the bottom position of 3D elements |
| `backface-visibility` | Defines whether or not an element should be visible when not facing the screen |

**CSS 3D Transform Functions**
The following table lists the 3D transform functions: [S1]

| Function | Description |
|----------|-------------|
| `matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)` | Defines a 3D transformation, using a 4x4 matrix of 16 values |
| `translate3d(x,y,z)` | Defines a 3D translation |
| `translateZ(z)` | Defines a 3D translation, using only the value for the Z-axis |
| `scale3d(x,y,z)` | Defines a 3D scale transformation |
| `scaleZ(z)` | Defines a 3D scale transformation by giving a value for the Z-axis |
| `rotate3d(x,y,z,angle)` | Defines a 3D rotation |
| `rotateX(angle)` | Defines a 3D rotation along the X-axis |
| `rotateY(angle)` | Defines a 3D rotation along the Y-axis |
| `rotateZ(angle)` | Defines a 3D rotation along the Z-axis |
| `perspective(n)` | Defines a perspective view for a 3D transformed element |

## 🛠️ 적용 사례 (Applied in summary)
The page applies 3D rotation to an element with id `myDiv`: `rotateX(150deg)`, `rotateY(150deg)`, and `rotateZ(90deg)`. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Rotate around each axis (language: CSS):
```css
#myDiv {
  transform: rotateX(150deg);
}

#myDiv {
  transform: rotateY(150deg);
}

#myDiv {
  transform: rotateZ(90deg);
}
```

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.88
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS 2D Transform Scale]], [[CSS 2D Transform Skew and Matrix]], [[CSS Transitions]]
- **참조 맥락:** Extends the 2D transform family into 3D space; pairs with perspective and backface-visibility for depth effects.

## 📚 출처 (Sources)
- [S1] W3Schools — CSS 3D Transforms — https://www.w3schools.com/css/css3_3dtransforms.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS 3D Transforms" page (Astra wiki-curation, P-Reinforce v3.1 format).