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>
This commit is contained in:
@@ -0,0 +1,141 @@
|
||||
---
|
||||
id: css-2d-transforms
|
||||
title: "CSS 2D Transforms"
|
||||
category: "Frontend"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["transform", "CSS 2D transforms", "translate", "rotate", "scale skew matrix"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.86
|
||||
created_at: 2026-06-23
|
||||
updated_at: 2026-06-23
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["css", "web", "frontend", "w3schools", "transforms", "transform", "2d-transforms"]
|
||||
raw_sources: ["https://www.w3schools.com/css/css3_2dtransforms.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[CSS 2D Transforms]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The CSS `transform` property applies 2D (or 3D) transformations to an element — letting you rotate, scale, move, and skew it — through methods such as `translate()`, `rotate()`, `scale()`, `skew()`, and `matrix()`. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`transform` applies a transformation** — the `transform` property applies a 2D or 3D transformation to an element, allowing you to rotate, scale, move, and skew it. [S1]
|
||||
- **2D transform methods** — CSS supports `translate()`, `rotate()`, `scaleX()`, `scaleY()`, `scale()`, `skewX()`, `skewY()`, `skew()`, and `matrix()`. [S1]
|
||||
- **`translate()` moves** — the `translate()` method moves an element from its current position according to the X-axis and Y-axis parameters given. [S1]
|
||||
- **`rotate()` rotates** — the `rotate()` method rotates an element clockwise or counter-clockwise by a given degree; negative values rotate counter-clockwise. [S1]
|
||||
- **`matrix()` combines methods** — `matrix()` defines a 2D transformation using a matrix of six values, combining all the 2D transform methods. [S1]
|
||||
|
||||
## 🧩 추출된 패턴 (Extracted patterns)
|
||||
- **Move pattern** — `transform: translate(x, y);`. [S1]
|
||||
- **Rotate pattern** — `transform: rotate(<deg>);` (negative degree = counter-clockwise). [S1]
|
||||
- **Method-vocabulary pattern** — single-axis variants (`translateX/Y`, `scaleX/Y`, `skewX/Y`) and combined forms (`scale`, `skew`, `matrix`) cover the full 2D transform set. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
**Introduction** [S1]
|
||||
The CSS `transform` property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, and skew elements.
|
||||
|
||||
**Available 2D transform methods** [S1]
|
||||
`translate()`, `rotate()`, `scaleX()`, `scaleY()`, `scale()`, `skewX()`, `skewY()`, `skew()`, `matrix()`.
|
||||
|
||||
**The `translate()` Method** [S1]
|
||||
The `translate()` method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis). The following example moves the element 50px to the right and 100px down:
|
||||
```css
|
||||
div {
|
||||
transform: translate(50px, 100px);
|
||||
}
|
||||
```
|
||||
|
||||
**The `rotate()` Method** [S1]
|
||||
The `rotate()` method rotates an element clockwise or counter-clockwise according to a given degree. Rotate the element 20 degrees clockwise:
|
||||
```css
|
||||
div {
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
```
|
||||
Using negative values will rotate the element counter-clockwise:
|
||||
```css
|
||||
div {
|
||||
transform: rotate(-20deg);
|
||||
}
|
||||
```
|
||||
|
||||
**The `scale()`, `skew()`, and `matrix()` Methods**
|
||||
The W3Schools 2D Transforms page lists these methods and describes them in its reference table (below), but their dedicated worked code examples live on separate follow-up pages and are not present on this page. Code examples for `scale`, `skew`, and `matrix` on this page: Not found in source.
|
||||
|
||||
**CSS Transform Properties table** [S1]
|
||||
|
||||
| Property | Description |
|
||||
|---|---|
|
||||
| `transform` | Applies a 2D or 3D transformation to an element |
|
||||
| `transform-origin` | Allows you to change the position on transformed elements |
|
||||
|
||||
**2D Transform Methods/Functions table** [S1]
|
||||
|
||||
| Function | Description |
|
||||
|---|---|
|
||||
| `matrix()` | Defines a 2D transformation, using a matrix of six values |
|
||||
| `translate()` | Defines a 2D translation, moving the element along the X- and the Y-axis |
|
||||
| `translateX()` | Defines a 2D translation, moving the element along the X-axis |
|
||||
| `translateY()` | Defines a 2D translation, moving the element along the Y-axis |
|
||||
| `scale()` | Defines a 2D scale transformation, scaling the element's width and height |
|
||||
| `scaleX()` | Defines a 2D scale transformation, scaling the element's width |
|
||||
| `scaleY()` | Defines a 2D scale transformation, scaling the element's height |
|
||||
| `rotate()` | Defines a 2D rotation, the angle is specified in the parameter |
|
||||
| `skew()` | Defines a 2D skew transformation along the X- and the Y-axis |
|
||||
| `skewX()` | Defines a 2D skew transformation along the X-axis |
|
||||
| `skewY()` | Defines a 2D skew transformation along the Y-axis |
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
The page's own demonstrations (a `div` moved with `translate()` and rotated with `rotate()`, including the negative-degree counter-clockwise case) serve as the applied examples. No external project/commit applications found in the source.
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Move an element (language: CSS):
|
||||
```css
|
||||
div {
|
||||
transform: translate(50px, 100px);
|
||||
}
|
||||
```
|
||||
Rotate clockwise / counter-clockwise:
|
||||
```css
|
||||
div {
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
```
|
||||
```css
|
||||
div {
|
||||
transform: rotate(-20deg);
|
||||
}
|
||||
```
|
||||
|
||||
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
|
||||
- **Single-axis vs combined methods** — use `translateX`/`translateY`, `scaleX`/`scaleY`, `skewX`/`skewY` to act on one axis, or the combined `translate`/`scale`/`skew` forms to act on both. [S1]
|
||||
- **Individual methods vs `matrix()`** — the readable methods (`translate`, `rotate`, `scale`, `skew`) cover common cases; `matrix()` packs all 2D transformations into a single six-value matrix. [S1]
|
||||
- **Positive vs negative `rotate()`** — positive degrees rotate clockwise, negative degrees counter-clockwise. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
No contradictions found in the source.
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.86
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
- **참고:** Worked code for `scale`/`skew`/`matrix` was not on this page (lives on follow-up pages); recorded as "Not found in source" rather than invented.
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[CSS Tutorial]]
|
||||
- **관련 개념:** [[CSS Box Shadow]], [[CSS Text Effects]], [[CSS Linear Gradients]]
|
||||
- **참조 맥락:** Referenced when visually moving, rotating, scaling, or skewing elements (hover effects, layout tweaks, animations).
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — CSS 2D Transforms — https://www.w3schools.com/css/css3_2dtransforms.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS 2D Transforms" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
Reference in New Issue
Block a user