1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: transform
slug: Web/CSS/transform
tags:
- CSS
- CSS Property
- Reference
- transform
translation_of: Web/CSS/transform
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>transform</code></strong> 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다.</span> <code>transform</code>은 CSS <a href="/ko/docs/Web/Guide/CSS/Visual_formatting_model">시각적 서식 모델</a>의 좌표 공간을 변경합니다.</p>
<div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div>
<p><code>none</code>이 아닌 값을 지정하면 새로운 <a href="/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>을 생성합니다. 이 경우, {{cssxref("position")}}이 <code>fixed</code>거나 <code>absolute</code>인 요소의 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a>으로서 작용합니다.</p>
<div class="warning">
<p>변형 가능한 요소만 <code>transform</code>할 수 있습니다. 즉, CSS 박스 모델이 레이아웃을 결정하는 모든 요소 중 <a href="/ko/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">비대체 인라인 박스</a>, <a href="/ko/docs/Web/HTML/Element/col">표 열 박스</a>, <a href="/ko/docs/Web/HTML/Element/colgroup">표 열 그룹 박스</a>를 제외한 요소에만 적용할 수 있습니다.</p>
</div>
<h2 id="구문">구문</h2>
<pre class="brush: css">/* 키워드 값 */
transform: none;
/* 함수 값 */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
/* 다중 함수 값 */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
/* 전역 값 */
transform: inherit;
transform: initial;
transform: unset;</pre>
<p><code>transform</code> 속성은 키워드 <code>{{anch("none")}}</code> 또는 하나 이상의 <code>{{anch("<transform-function>")}}</code> 값을 사용해 지정할 수 있습니다.</p>
<h3 id="값">값</h3>
<dl>
<dt id="<transform-function>">{{cssxref("<transform-function>")}}</dt>
<dd>요소에 적용할 하나 이상의 <a href="/ko/docs/Web/CSS/transform-function">CSS 변형 함수</a>. 변형 함수는 왼쪽에서 오른쪽으로 곱해집니다. 즉, 요소에 변형을 오른쪽부터 왼쪽으로 하나씩 순서대로 적용하는 것과 같습니다.</dd>
<dt id="none"><code>none</code></dt>
<dd>아무런 변형도 적용하지 않음.</dd>
</dl>
<h3 id="형식_구문">형식 구문</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<p>{{cssxref("transform-function/perspective", "perspective()")}}가 변형 함수의 일부라면 항상 제일 앞에 위치해야 합니다.</p>
<h2 id="예제">예제</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div>Transformed element</div></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">div {
border: solid red;
transform: translate(30px, 20px) rotate(20deg);
width: 140px;
height: 60px;
}</pre>
<h3 id="결과">결과</h3>
<p>{{EmbedLiveSample("예제", "400", "160")}}</p>
<p><a href="/ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">CSS 변형 사용하기</a>와 {{cssxref("<transform-function>")}} 문서를 방문해 더 많은 예제를 찾아보세요.</p>
<h2 id="접근성_고려사항">접근성 고려사항</h2>
<p>크기 변경/확대/축소 애니메이션은 흔한 편두통 유발 요인이므로 접근성에 좋지 않습니다. 그러나 꼭 넣어야 한다면 되도록 사이트 전체의 애니메이션을 켜거나 끌 수 있는 방법을 제공하는걸 고려해주세요.</p>
<p>{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} 미디어 기능을 사용할 수도 있습니다. <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries">미디어 쿼리</a>와 함께 사용하면, 사용자가 시스템 설정에서 애니메이션을 줄였는지 알아내고, 애니메이션을 비활성화할 수 있습니다.</p>
<p>자세한 내용은 다음 링크에서 확인할 수 있습니다.</p>
<ul>
<li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">MDN Understanding WCAG, Guideline 2.3 explanations</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1</a></li>
</ul>
<h2 id="명세">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}</td>
<td>{{Spec2('CSS Transforms 2')}}</td>
<td>Adds 3D transform functions.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td>
<td>{{Spec2('CSS3 Transforms')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("css.properties.transform")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li><a href="/ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">CSS 변형 사용하기</a></li>
<li>변형 함수의 설명을 담은 {{cssxref("<transform-function>")}} 자료형 문서.</li>
<li>CSS 변형 함수의 시각화가 가능한 온라인 도구: <a href="https://css-transform.moro.es/">CSS Transform Playground</a></li>
</ul>
|
