initial commit

2 files changed, 146 insertions, 0 deletions

diff --git a/files/ko/web/css/css_transforms/index.html b/files/ko/web/css/css_transforms/index.html
new file mode 100644
index 0000000000..f4cffad3b6
--- /dev/null
+++ b/files/ko/web/css/css_transforms/index.html
@@ -0,0 +1,66 @@
+---
+title: CSS Transforms
+slug: Web/CSS/CSS_Transforms
+tags:
+  - CSS
+  - CSS Transforms
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Transforms
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Transforms</strong> is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Properties">Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("backface-visibility")}}</li>
+ <li>{{cssxref("perspective")}}</li>
+ <li>{{cssxref("perspective-origin")}}</li>
+ <li>{{cssxref("rotate")}}</li>
+ <li>{{cssxref("scale")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-box")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("transform-style")}}</li>
+ <li>{{cssxref("translate")}}</li>
+</ul>
+</div>
+
+<h3 id="Data_types">Data types</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Using CSS transforms</a></dt>
+ <dd>Step-by-step tutorial about how to transform elements styled with CSS.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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('CSS3 Transforms') }}</td>
+   <td>{{ Spec2('CSS3 Transforms') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_transforms/using_css_transforms/index.html b/files/ko/web/css/css_transforms/using_css_transforms/index.html
new file mode 100644
index 0000000000..1c29e3b1e3
--- /dev/null
+++ b/files/ko/web/css/css_transforms/using_css_transforms/index.html
@@ -0,0 +1,80 @@
+---
+title: CSS 변형 사용하기
+slug: Web/CSS/CSS_Transforms/Using_CSS_transforms
+tags:
+  - 3D
+  - Advanced
+  - CSS
+  - CSS Transforms
+  - Graphics
+  - Guide
+translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS 변형</strong>(transform)은 좌표공간을 변형함으로써 일반적인 문서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꿉니다. 본 가이드는 변형 사용법의 기초를 제시합니다.</p>
+
+<p>CSS 변형은 HTML 요소에 선형 아핀 변형(affine linear transformation)을 적용하는 여러 개의 CSS 속성을 조합해 구현합니다. 변형은 평면과 3D 공간에서의 회전, 확대, 이동, 비틀기를 포함합니다.</p>
+
+<div class="warning">
+<p><a href="/ko/docs/Web/CSS/CSS_Box_Model">박스 모델</a>에 따라 배치된 요소만 <code>transform</code>을 적용할 수 있습니다. 한 가지 예를 들자면, <code>display: block</code>속성을 가진 요소는 박스 모델을 따릅니다. </p>
+</div>
+
+<h2 id="CSS_변형_속성">CSS 변형 속성</h2>
+
+<p>CSS 변형을 정의할 때 중요한 두 가지 속성은 {{cssxref("transform")}}과 {{cssxref("transform-origin")}}입니다.</p>
+
+<dl>
+ <dt>{{cssxref("transform-origin")}}</dt>
+ <dd>원점의 위치를 지정합니다. 기본값은 요소의 중심이며 변경할 수 있습니다. 회전, 확대, 비틀기 등 하나의 점을 기준으로 하는 변형에서 사용합니다.</dd>
+ <dt>{{cssxref("transform")}}</dt>
+ <dd>요소에 적용할 변형을 지정합니다. 여러 개의 변형 목록을 공백으로 구분하여 대입하면 순차적으로 합성한 결과물을 적용합니다. 합성은 오른쪽부터 왼쪽으로 진행합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 이미지는 변형하지 않은 MDN 로고입니다.</p>
+
+<p><img alt="MDN Logo" src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"></p>
+
+<h3 id="회전">회전</h3>
+
+<p>MDN 로고를 90도 회전합니다.</p>
+
+<pre class="brush: html notranslate">&lt;img style="transform: rotate(90deg);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"&gt;</pre>
+
+<p>{{EmbedLiveSample('회전', 'auto', 240) }}</p>
+
+<h3 id="비틀고_옮기기">비틀고 옮기기</h3>
+
+<p>MDN 로고를 10도 비틀고 X축으로 150픽셀 옮깁니다.</p>
+
+<pre class="brush: html notranslate">&lt;img style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"&gt;</pre>
+
+<p>{{EmbedLiveSample('비틀고_옮기기') }}</p>
+
+<h2 id="3D_전용_CSS_속성">3D 전용 CSS 속성</h2>
+
+<p>3D 공간에서의 CSS 변환은 좀 더 복잡합니다. 우선 원근감을 부여해 3D 공간을 설정한 후에, 2D 요소가 그 안에서 어떻게 행동할지 설정해야 합니다..</p>
+
+<h3 id="원근">원근</h3>
+
+<p>처음으로 정할 항목은 {{cssxref("perspective")}}입니다. 우리가 입체라고 느낄 수 있는 건 원근감 덕분입니다. 요소가 관찰자에서 멀어질 수록 더 작게 보입니다.</p>
+
+<p>{{page("/ko/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}}</p>
+
+<p>다음으로는 {{cssxref("perspective-origin")}} 속성으로 관찰자의 위치를 정해야 합니다. 기본값은 중앙으로, 언제나 충분한 위치는 아닙니다.</p>
+
+<p>{{page("/ko/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}}</p>
+
+<p>모든 과정을 마쳤다면 3D 공간의 요소를 작업할 수 있습니다.</p>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">Using device orientation with 3D Transforms</a></li>
+</ul>