---
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).