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 625593 of CSS transform 사용하기

  • 리비전 슬러그: Web/CSS/Using_CSS_transforms
  • 리비전 제목: CSS transform 사용하기
  • 리비전 아이디: 625593
  • 제작일시:
  • 만든이: teoli
  • 현재 리비전인가요? 아니오
  • 댓글 CSS/Using_CSS_transforms Web/CSS/Using_CSS_transforms
태그: 

리비전 내용

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><strong>CSS transform</strong>를 사용하여 좌표공간을 변형함으로써, 다른 엘리먼트에 영향을 미치지 않고 특정 엘리먼트의 위치를 바꿀 수 있다. 몇 가지 CSS 속성을 이용하여 엘리먼트에 아핀(affine) 선형 변환을 적용할 수 있다. 여기에는 회전(rotation), 비틀기(skewing), 확대/축소(scaling), 평면과 3D 공간에서 이동(tranlation) 등이 있다.</p>
<h2 id="CSS_transforms_.EC.86.8D.EC.84.B1">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=".EC.98.88.EC.A0.9C">예제(Examples)</h2>
<h3 id=".EC.98.88.EC.A0.9C.3A_.ED.9A.8C.EC.A0.84">예제: 회전(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=".EC.98.88.EC.A0.9C.3A.C2.A0.EB.B9.84.ED.8B.80.EA.B3.A0_.EC.98.AE.EA.B8.B0.EA.B8.B0">예제:&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_.EA.B4.80.EB.A0.A8_CSS_.EC.86.8D.EC.84.B1">3D 관련 CSS 속성</h2>
<p>CSS 속성(property)을 공간(space)에서 지정하는건 조금 까다롭다. 먼저 시점(perspective)을 정함으로서 3D공간을 구성하고, 2D 엘리먼트(element)가 그 공간안에서 어떻게 동작할지를 설정해야 한다.</p>
<h3 id=".EC.8B.9C.EC.A0.90_.EC.A0.95.ED.95.98.EA.B8.B0">시점(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>&nbsp;</p>
<p>여기까지 왔다면 3D 공간에서도 문제 없을 것이다.</p>
<h3 id="3.EC.B0.A8.EC.9B.90_.EA.B3.B5.EA.B0.84.EC.97.90.EC.84.9C_2.EC.B0.A8.EC.9B.90_.EC.97.98.EB.A6.AC.EB.A8.BC.ED.8A.B8.EB.93.A4">&nbsp;</h3>
<h2 id=".EB.8D.94_.EB.B3.B4.EA.B8.B0">더 보기(See also)</h2>
<ul>
  <li>{{ CSS_Reference:Transforms() }}</li>
  <li><a href="/en/Using_Deviceorientation_In_3D_Transforms" title="Using Deviceorientation In 3D Transforms">Using deviceorientation in 3D Transforms</a></li>
</ul>
현재 리비전 복원