2nd/10_Wiki/Topic_CSS/CSS_2D_Transforms_Skew.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-transform-skew-and-matrix	CSS 2D Transform Skew and Matrix	Frontend	draft	conceptual		skew() skewX() skewY() matrix() CSS skew 2D matrix transform		B	0.88	2026-06-23	2026-06-23			css web frontend w3schools transform 2d-transform skew matrix	https://www.w3schools.com/css/css3_2dtransforms_skew.asp

CSS 2D Transform Skew and Matrix

🎯 한 줄 통찰 (One-line insight)

The skewX(), skewY(), and skew() functions slant an element along the X- and/or Y-axis by a given angle, while matrix() combines all 2D transform methods (translate, rotate, scale, skew) into one six-value declaration. [S1]

🧠 핵심 개념 (Core concepts)

• skewX() — skews an element along the X-axis by the given angle. [S1]
• skewY() — skews an element along the Y-axis by the given angle. [S1]
• skew() — skews an element along both the X- and Y-axis; if the second parameter is omitted it defaults to zero. [S1]
• matrix() — combines all the 2D transform methods into one, taking six parameters in the order matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()). [S1]

🧩 추출된 패턴 (Extracted patterns)

• Angular slant — skew functions take angle values (deg); skew(ax, ay) slants along both axes at once. [S1]
• Unified transform — matrix() packs scale, skew, and translate into a single function call for compact combined transforms. [S1]

📖 세부 내용 (Details)

The CSS skewX() Function The skewX() function skews an element along the X-axis by the given angle. The following example skews the <div> element 20 degrees along the X-axis: [S1]

div {
  transform: skewX(20deg);
}

The CSS skewY() Function The skewY() function skews an element along the Y-axis by the given angle. The following example skews the <div> element 20 degrees along the Y-axis: [S1]

div {
  transform: skewY(20deg);
}

The CSS skew() Function The skew() function skews an element along the X- and Y-axis by the given angles. The following example skews the <div> element 20 degrees along the X-axis, and 10 degrees along the Y-axis: [S1]

div {
  transform: skew(20deg, 10deg);
}

If the second parameter is not specified, it has a zero value. So, the following example skews the <div> element 20 degrees along the X-axis: [S1]

div {
  transform: skew(20deg);
}

The CSS matrix() Function The matrix() function combines all the 2D transform methods into one. The matrix() method takes six parameters, containing mathematic functions, which allow you to rotate, scale, move (translate), and skew elements. The parameters are as follow: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()). [S1]

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

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

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

Function	Description
matrix(n,n,n,n,n,n)	Defines a 2D transformation, using a matrix of six values
translate(x,y)	Defines a 2D translation, moving the element along the X- and Y-axis
translateX(n)	Defines a 2D translation, moving the element along the X-axis
translateY(n)	Defines a 2D translation, moving the element along the Y-axis
scale(x,y)	Defines a 2D scale transformation, changing the element's width and height
scaleX(n)	Defines a 2D scale transformation, changing the element's width
scaleY(n)	Defines a 2D scale transformation, changing the element's height
rotate(angle)	Defines a 2D rotation, the angle is specified in the parameter
skew(x-angle,y-angle)	Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle)	Defines a 2D skew transformation along the X-axis
skewY(angle)	Defines a 2D skew transformation along the Y-axis

🛠️ 적용 사례 (Applied in summary)

The page applies skewing to a <div> (skewX(20deg), skewY(20deg), skew(20deg, 10deg), skew(20deg)) and demonstrates a combined transform via matrix(1, -0.3, 0, 1, 0, 0). No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Skew along axes (language: CSS):

div {
  transform: skew(20deg, 10deg);
}

Combined matrix transform:

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

⚖️ 모순 및 업데이트 (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 3D Transforms, CSS Transitions
• 참조 맥락: Completes the CSS 2D transform set; matrix() is the low-level form into which the other 2D functions compile.

📚 출처 (Sources)

• [S1] W3Schools — CSS 2D Transform Skew and Matrix — https://www.w3schools.com/css/css3_2dtransforms_skew.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "CSS 2D Transform Skew and Matrix" page (Astra wiki-curation, P-Reinforce v3.1 format).