docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)

W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더). - Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외) - Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체) - Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속) 각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-23 19:21:18 +09:00
parent 8957890d13
commit 9609c04755
379 changed files with 54618 additions and 6 deletions
@@ -0,0 +1,128 @@
+---
+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).