Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 951989 of CSS transform 사용하기

  • 리비전 슬러그: Web/CSS/CSS_Transforms/Using_CSS_transforms
  • 리비전 제목: CSS transform 사용하기
  • 리비전 아이디: 951989
  • 제작일시:
  • 만든이: fscholz
  • 현재 리비전인가요? 네
  • 댓글 Removed "See also" macro, now that we have proper quicklinks
태그: 

리비전 내용

{{CSSRef}}

CSS transform를 사용하여 좌표공간을 변형함으로써, 다른 엘리먼트에 영향을 미치지 않고 특정 엘리먼트의 위치를 바꿀 수 있다. 몇 가지 CSS 속성을 이용하여 엘리먼트에 아핀(affine) 선형 변환을 적용할 수 있다. 여기에는 회전(rotation), 비틀기(skewing), 확대/축소(scaling), 평면과 3D 공간에서 이동(tranlation) 등이 있다.

CSS transforms 속성(properties)

CSS transform에서 가장 중요한 속성은 {{ cssxref("transform") }} 과 {{ cssxref("transform-origin") }} 이다.

{{ cssxref("transform-origin") }}
원점의 위치를 지정한다. 기본값은 엘리먼트의 왼쪽(left) 위(top)이지만, 수정이 가능하다. 회전(rotation), 확대/축소(scaling), 비틀기(skewing) 같이 한 점을 기준으로 수행되는 변환에 대해서 이 속성을 지정할 수 있다.
{{ cssxref("transform") }}
엘리먼트(element)에 적용될 변환(transform)을 지정한다. 몇 가지 변환을 공백으로 구분하여 순서대로 지정해놓음으로써, 여러가지 변환을 동시에 적용할 수 있다. 

예제(Examples)

예제: 회전(Rotating)

이 예제는 iframe을 생성하고, 구글 홈페이지를 왼쪽아래(bottom-left)를 기준으로 90도 회전하여 보여준다. 

VIEW LIVE EXAMPLE VIEW SCREENSHOT OF EXAMPLE

<div style="transform: rotate(90deg); transform-origin: bottom left;">
  <iframe src="https://www.google.com/" width="500" height="600"></iframe>
</div>

예제: 비틀고 옮기기(Skewing and translating)

이 예제는 iframe을 생성하고, 구글 홈페이지를 10도 비틀고(skew) x축으로 150 픽셀만큼 옮겨서(translate) 보여준다.

VIEW LIVE EXAMPLE  VIEW SCREENSHOT OF EXAMPLE

<div style="transform: skewx(10deg) translatex(150px);
            transform-origin: bottom left;">
  <iframe src="https://www.google.com/" width="600" height="500"></iframe>
</div>

3D 관련 CSS 속성

CSS 속성(property)을 공간(space)에서 지정하는건 조금 까다롭다. 먼저 시점(perspective)을 정함으로서 3D공간을 구성하고, 2D 엘리먼트(element)가 그 공간안에서 어떻게 동작할지를 설정해야 한다.

시점(Perspective) 정하기

먼저 정해야할건 시점(perspective)이다. 시점 때문에 3차원 공간의 느낌이 난다. 엘리먼트(element)가 사용자(viewer)로부터 멀어질수록 작아진다.

멀어질수록 얼마나 빨리 작아질지는 {{ cssxref("perspective") }} 속성을 통해 지정한다. 작은 값을 지정할수록 원근감이 깊어진다. 

 

perspective:0; perspective:250px;
   
1
2
3
4
5
6
   
1
2
3
4
5
6
perspective:300px; perspective:350px;
   
1
2
3
4
5
6
   
1
2
3
4
5
6
 

 

다음으로 지정해야할 요소는 관찰자(viewer)의 위치이다. {{ cssxref("perspective-origin") }} 속성을 통해 지정한다. perspective의 기본값(default)은 관찰자의 중심이다.

 

perspective-origin:150px 150px; perspective-origin:50% 50%; perspective-origin:-50px -50px;
   
1
2
3
4
5
6
   
1
2
3
4
5
6
   
1
2
3
4
5
6
 

여기까지 왔다면 3D 공간에서도 문제 없을 것이다.

더 보기(See also)

리비전 소스

 
<p>{{CSSRef}}</p>

<p><strong>CSS transform</strong>를 사용하여 좌표공간을 변형함으로써, 다른 엘리먼트에 영향을 미치지 않고 특정 엘리먼트의 위치를 바꿀 수 있다. 몇 가지 CSS 속성을 이용하여 엘리먼트에 아핀(affine) 선형 변환을 적용할 수 있다. 여기에는 회전(rotation), 비틀기(skewing), 확대/축소(scaling), 평면과 3D 공간에서 이동(tranlation) 등이 있다.</p>

<h2 id="CSS_transforms_속성(properties)">CSS transforms 속성(properties)</h2>

<p>CSS transform에서 가장 중요한 속성은 {{ cssxref("transform") }} 과 {{ cssxref("transform-origin") }} 이다.</p>

<dl>
 <dt>{{ cssxref("transform-origin") }}</dt>
 <dd>원점의 위치를 지정한다. 기본값은 엘리먼트의 왼쪽(left) 위(top)이지만, 수정이 가능하다. 회전(rotation), 확대/축소(scaling), 비틀기(skewing) 같이 한 점을 기준으로 수행되는 변환에 대해서 이 속성을 지정할 수 있다.</dd>
 <dt>{{ cssxref("transform") }}</dt>
 <dd>엘리먼트(element)에 적용될 변환(transform)을 지정한다. 몇 가지 변환을 공백으로 구분하여 순서대로 지정해놓음으로써, 여러가지 변환을 동시에 적용할 수 있다.&nbsp;</dd>
</dl>

<h2 id="예제(Examples)">예제(Examples)</h2>

<h3 id="예제_회전(Rotating)">예제: 회전(Rotating)</h3>

<p>이 예제는 iframe을 생성하고,&nbsp;구글 홈페이지를&nbsp;왼쪽아래(bottom-left)를 기준으로 90도 회전하여 보여준다.&nbsp;</p>

<p><a class="button liveSample" href="https://developer.mozilla.org/@api/deki/files/2921/=rotated-google-sample.html" style="color: rgb(255, 255, 255); padding: 0.35em 0.75em 0.2em; background-image: url(https://developer.cdn.mozilla.net/media/img/button-shade.png); line-height: 1; font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; text-transform: uppercase; border: 0px; border-top-left-radius: 0.2em; border-top-right-radius: 0.2em; border-bottom-right-radius: 0.2em; border-bottom-left-radius: 0.2em; -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 1px 1px 0px; box-shadow: rgba(0, 0, 0, 0.247059) 1px 1px 0px; background-position: 0px 0.75em; background-repeat: repeat no-repeat;" title="/@api/deki/files/2921/=rotated-google-sample.html">VIEW LIVE EXAMPLE</a><span style="line-height:21px">&nbsp;</span><a class="button liveSample" href="https://developer.mozilla.org/@api/deki/files/2920/=google-rotated.png" style="color: rgb(255, 255, 255); padding: 0.35em 0.75em 0.2em; background-image: url(https://developer.cdn.mozilla.net/media/img/button-shade.png); line-height: 1; font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; text-transform: uppercase; border: 0px; border-top-left-radius: 0.2em; border-top-right-radius: 0.2em; border-bottom-right-radius: 0.2em; border-bottom-left-radius: 0.2em; -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 1px 1px 0px; box-shadow: rgba(0, 0, 0, 0.247059) 1px 1px 0px; background-position: 0px 0.75em; background-repeat: repeat no-repeat;" title="/@api/deki/files/2920/=google-rotated.png">VIEW SCREENSHOT OF EXAMPLE</a></p>

<pre class="brush: html">
&lt;div style="transform: rotate(90deg); transform-origin: bottom left;"&gt;
&nbsp; &lt;iframe src="https://www.google.com/" width="500" height="600"&gt;&lt;/iframe&gt;
&lt;/div&gt;
</pre>

<h3 id="예제_비틀고_옮기기(Skewing_and_translating)">예제:&nbsp;비틀고 옮기기(Skewing and translating)</h3>

<p>이 예제는 iframe을 생성하고, 구글 홈페이지를 10도 비틀고(skew) x축으로 150 픽셀만큼 옮겨서(translate) 보여준다.</p>

<p><a class="button liveSample" href="https://developer.mozilla.org/@api/deki/files/2922/=skewed-google-sample.html" style="color: rgb(255, 255, 255); padding: 0.35em 0.75em 0.2em; background-image: url(https://developer.cdn.mozilla.net/media/img/button-shade.png); line-height: 1; font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; text-transform: uppercase; border: 0px; border-top-left-radius: 0.2em; border-top-right-radius: 0.2em; border-bottom-right-radius: 0.2em; border-bottom-left-radius: 0.2em; -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 1px 1px 0px; box-shadow: rgba(0, 0, 0, 0.247059) 1px 1px 0px; background-position: 0px 0.75em; background-repeat: repeat no-repeat;" title="https://developer.mozilla.org/editor/fckeditor/core/editor/@api/deki/files/2922/=skewed-google-sample.html">VIEW LIVE EXAMPLE</a><span style="line-height:21px">&nbsp;&nbsp;</span><a class="button liveSample" href="https://developer.mozilla.org/@api/deki/files/2923/=skewed-google.png" style="color: rgb(255, 255, 255); padding: 0.35em 0.75em 0.2em; background-image: url(https://developer.cdn.mozilla.net/media/img/button-shade.png); line-height: 1; font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; text-transform: uppercase; border: 0px; border-top-left-radius: 0.2em; border-top-right-radius: 0.2em; border-bottom-right-radius: 0.2em; border-bottom-left-radius: 0.2em; -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 1px 1px 0px; box-shadow: rgba(0, 0, 0, 0.247059) 1px 1px 0px; background-position: 0px 0.75em; background-repeat: repeat no-repeat;" title="/@api/deki/files/2923/=skewed-google.png">VIEW SCREENSHOT OF EXAMPLE</a></p>

<pre class="brush: html">
&lt;div style="transform: skewx(10deg) translatex(150px);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  transform-origin: bottom left;"&gt;
&nbsp; &lt;iframe src="https://www.google.com/" width="600" height="500"&gt;&lt;/iframe&gt;
&lt;/div&gt;
</pre>

<h2 id="3D_관련_CSS_속성">3D 관련 CSS 속성</h2>

<p>CSS 속성(property)을 공간(space)에서 지정하는건 조금 까다롭다. 먼저 시점(perspective)을 정함으로서 3D공간을 구성하고, 2D 엘리먼트(element)가 그 공간안에서 어떻게 동작할지를 설정해야 한다.</p>

<h3 id="시점(Perspective)_정하기">시점(Perspective) 정하기</h3>

<p>먼저 정해야할건 <em>시점(perspective)</em>이다. 시점 때문에 3차원 공간의 느낌이 난다. 엘리먼트(element)가 사용자(viewer)로부터 멀어질수록 작아진다.</p>

<p>멀어질수록 얼마나 빨리 작아질지는 {{ cssxref("perspective") }} 속성을 통해 지정한다. 작은 값을 지정할수록 원근감이 깊어진다.&nbsp;</p>

<p>&nbsp;</p>

<table class="standard-table" style="border-spacing:0px; margin:0px 0px 1.286em">
 <thead>
  <tr>
   <th style="font-style: inherit;"><code style="font-style: inherit;">perspective:0;</code></th>
   <th style="font-style: inherit;"><code style="font-style: inherit;">perspective:250px;</code></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>
    <div class="container" style="width: 200px; height: 200px; margin: 75px 0px 0px 75px; border: none;">
    <div class="cube" style="width: 200px; height: 200px; -webkit-perspective: 0; -webkit-transform-style: preserve-3d; -webkit-perspective-origin-x: 150%; -webkit-perspective-origin-y: 150%;">
    <div class="middle" style="position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: transparent;">&nbsp; &nbsp;</div>

    <div class="front" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(0, 0, 0, 0.298039); -webkit-transform: translateZ(50px);">1</div>

    <div class="back" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; text-align: center; background-color: rgb(0, 255, 0); color: black; -webkit-transform: translateZ(-50px);">2</div>

    <div class="right" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(196, 0, 0, 0.701961); -webkit-transform: rotateY(90deg) translateZ(50px);">3</div>

    <div class="left" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(0, 0, 196, 0.701961); -webkit-transform: rotateY(-90deg) translateZ(50px);">4</div>

    <div class="top" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(196, 196, 0, 0.701961); -webkit-transform: rotateX(90deg) translateZ(50px);">5</div>

    <div class="bottom" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(196, 0, 196, 0.701961); -webkit-transform: rotateX(-90deg) translateZ(50px);">6</div>
    </div>
    </div>
   </td>
   <td>
    <div class="container" style="width: 200px; height: 200px; margin: 75px 0px 0px 75px; border: none;">
    <div class="cube" style="width: 200px; height: 200px; -webkit-perspective: 250px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin-x: 150%; -webkit-perspective-origin-y: 150%;">
    <div class="middle" style="position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: transparent;">&nbsp; &nbsp;</div>

    <div class="front" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(0, 0, 0, 0.298039); -webkit-transform: translateZ(50px);">1</div>

    <div class="back" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; text-align: center; background-color: rgb(0, 255, 0); color: black; -webkit-transform: translateZ(-50px);">2</div>

    <div class="right" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(196, 0, 0, 0.701961); -webkit-transform: rotateY(90deg) translateZ(50px);">3</div>

    <div class="left" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(0, 0, 196, 0.701961); -webkit-transform: rotateY(-90deg) translateZ(50px);">4</div>

    <div class="top" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(196, 196, 0, 0.701961); -webkit-transform: rotateX(90deg) translateZ(50px);">5</div>

    <div class="bottom" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(196, 0, 196, 0.701961); -webkit-transform: rotateX(-90deg) translateZ(50px);">6</div>
    </div>
    </div>
   </td>
  </tr>
 </tbody>
</table>

<table class="standard-table" style="border-spacing:0px; margin:0px 0px 1.286em">
 <thead>
  <tr>
   <th style="font-style: inherit;"><code style="font-style: inherit;">perspective:300px;</code></th>
   <th style="font-style: inherit;"><code style="font-style: inherit;">perspective:350px;</code></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>
    <div class="container" style="width: 200px; height: 200px; margin: 75px 0px 0px 75px; border: none;">
    <div class="cube" style="width: 200px; height: 200px; -webkit-perspective: 300px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin-x: 150%; -webkit-perspective-origin-y: 150%;">
    <div class="middle" style="position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: transparent;">&nbsp; &nbsp;</div>

    <div class="front" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(0, 0, 0, 0.298039); -webkit-transform: translateZ(50px);">1</div>

    <div class="back" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; text-align: center; background-color: rgb(0, 255, 0); color: black; -webkit-transform: translateZ(-50px);">2</div>

    <div class="right" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(196, 0, 0, 0.701961); -webkit-transform: rotateY(90deg) translateZ(50px);">3</div>

    <div class="left" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(0, 0, 196, 0.701961); -webkit-transform: rotateY(-90deg) translateZ(50px);">4</div>

    <div class="top" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(196, 196, 0, 0.701961); -webkit-transform: rotateX(90deg) translateZ(50px);">5</div>

    <div class="bottom" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(196, 0, 196, 0.701961); -webkit-transform: rotateX(-90deg) translateZ(50px);">6</div>
    </div>
    </div>
   </td>
   <td>
    <div class="container" style="width: 200px; height: 200px; margin: 75px 0px 0px 75px; border: none;">
    <div class="cube" style="width: 200px; height: 200px; -webkit-perspective: 350px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin-x: 150%; -webkit-perspective-origin-y: 150%;">
    <div class="middle" style="position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: transparent;">&nbsp; &nbsp;</div>

    <div class="front" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(0, 0, 0, 0.298039); -webkit-transform: translateZ(50px);">1</div>

    <div class="back" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; text-align: center; background-color: rgb(0, 255, 0); color: black; -webkit-transform: translateZ(-50px);">2</div>

    <div class="right" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(196, 0, 0, 0.701961); -webkit-transform: rotateY(90deg) translateZ(50px);">3</div>

    <div class="left" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(0, 0, 196, 0.701961); -webkit-transform: rotateY(-90deg) translateZ(50px);">4</div>

    <div class="top" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(196, 196, 0, 0.701961); -webkit-transform: rotateX(90deg) translateZ(50px);">5</div>

    <div class="bottom" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(196, 0, 196, 0.701961); -webkit-transform: rotateX(-90deg) translateZ(50px);">6</div>

    <div>&nbsp;</div>
    </div>
    </div>
   </td>
  </tr>
 </tbody>
</table>

<p>&nbsp;</p>

<div>다음으로 지정해야할 요소는 관찰자(viewer)의 위치이다. {{ cssxref("perspective-origin") }} 속성을 통해 지정한다. perspective의 기본값(default)은 관찰자의 중심이다.</div>

<p>&nbsp;</p>

<div>
<table class="standard-table" style="border-spacing:0px; margin:0px 0px 1.286em">
 <thead>
  <tr>
   <th style="font-style: inherit;"><code style="font-style: inherit;">perspective-origin:150px 150px;</code></th>
   <th style="font-style: inherit;"><code style="font-style: inherit;">perspective-origin:50% 50%;</code></th>
   <th style="font-style: inherit;"><code style="font-style: inherit;">perspective-origin:-50px -50px;</code></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>
    <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;">
    <div class="cube" style="width: 100px; height: 100px; -webkit-perspective: 300px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin-x: 150%; -webkit-perspective-origin-y: 150%;">
    <div class="middle" style="position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: transparent;">&nbsp; &nbsp;</div>

    <div class="front" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(0, 0, 0, 0.298039); -webkit-transform: translateZ(50px);">1</div>

    <div class="back" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; text-align: center; background-color: rgb(0, 255, 0); color: black; -webkit-transform: translateZ(-50px);">2</div>

    <div class="right" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(196, 0, 0, 0.701961); -webkit-transform: rotateY(90deg) translateZ(50px);">3</div>

    <div class="left" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(0, 0, 196, 0.701961); -webkit-transform: rotateY(-90deg) translateZ(50px);">4</div>

    <div class="top" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(196, 196, 0, 0.701961); -webkit-transform: rotateX(90deg) translateZ(50px);">5</div>

    <div class="bottom" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(196, 0, 196, 0.701961); -webkit-transform: rotateX(-90deg) translateZ(50px);">6</div>
    </div>
    </div>
   </td>
   <td>
    <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;">
    <div class="cube" style="width: 100px; height: 100px; -webkit-perspective: 300px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%;">
    <div class="middle" style="position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: transparent;">&nbsp; &nbsp;</div>

    <div class="front" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(0, 0, 0, 0.298039); -webkit-transform: translateZ(50px);">1</div>

    <div class="back" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; text-align: center; background-color: rgb(0, 255, 0); color: black; -webkit-transform: translateZ(-50px);">2</div>

    <div class="right" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(196, 0, 0, 0.701961); -webkit-transform: rotateY(90deg) translateZ(50px);">3</div>

    <div class="left" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(0, 0, 196, 0.701961); -webkit-transform: rotateY(-90deg) translateZ(50px);">4</div>

    <div class="top" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(196, 196, 0, 0.701961); -webkit-transform: rotateX(90deg) translateZ(50px);">5</div>

    <div class="bottom" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(196, 0, 196, 0.701961); -webkit-transform: rotateX(-90deg) translateZ(50px);">6</div>
    </div>
    </div>
   </td>
   <td>
    <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;">
    <div class="cube" style="width: 100px; height: 100px; -webkit-perspective: 300px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin-x: -50%; -webkit-perspective-origin-y: -50%;">
    <div class="middle" style="position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: transparent;">&nbsp; &nbsp;</div>

    <div class="front" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(0, 0, 0, 0.298039); -webkit-transform: translateZ(50px);">1</div>

    <div class="back" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; text-align: center; background-color: rgb(0, 255, 0); color: black; -webkit-transform: translateZ(-50px);">2</div>

    <div class="right" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(196, 0, 0, 0.701961); -webkit-transform: rotateY(90deg) translateZ(50px);">3</div>

    <div class="left" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(0, 0, 196, 0.701961); -webkit-transform: rotateY(-90deg) translateZ(50px);">4</div>

    <div class="top" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(196, 196, 0, 0.701961); -webkit-transform: rotateX(90deg) translateZ(50px);">5</div>

    <div class="bottom" style="position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background-color: rgba(196, 0, 196, 0.701961); -webkit-transform: rotateX(-90deg) translateZ(50px);">6</div>

    <div>&nbsp;</div>
    </div>
    </div>
   </td>
  </tr>
 </tbody>
</table>
</div>

<p>여기까지 왔다면 3D 공간에서도 문제 없을 것이다.</p>

<h2 id="더_보기(See_also)">더 보기(See also)</h2>

<ul>
 <li><a href="/en/Using_Deviceorientation_In_3D_Transforms" title="Using Deviceorientation In 3D Transforms">Using deviceorientation in 3D Transforms</a></li>
</ul>
현재 리비전 복원