2nd/10_Wiki/Topic_CSS/CSS_2D_Transforms.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
css-2d-transforms	CSS 2D Transforms	Frontend	draft	conceptual		transform CSS 2D transforms translate rotate scale skew matrix		B	0.86	2026-06-23	2026-06-23			css web frontend w3schools transforms transform 2d-transforms	https://www.w3schools.com/css/css3_2dtransforms.asp

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:

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:

div {
  transform: rotate(20deg);
}

Using negative values will rotate the element counter-clockwise:

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

div {
  transform: translate(50px, 100px);
}

Rotate clockwise / counter-clockwise:

div {
  transform: rotate(20deg);
}

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