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

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

리비전 내용

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

CSS transforms 속성

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

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

예제

예제: 회전

이 예제는 구글 홈페이지를 90도 회전하여 보여준다. 

예제 보기
스크린샷 보기

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

예제: 비틀고 옮기기

이 예제는 구글 홈페이지를 10도 비틀고 x축으로 150 픽셀만큼 옮겨서 보여준다.

예제 보기
스크린샷 보기

<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 속성을 공간에서 지정하는건 조금 까다롭다. 먼저 시점을 주고 2차원 엘리먼트가 보일지 결정한다.

시점 정하기

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

멀어질수록 얼마나 빨리 작아질지는 {{ cssxref("perspective") }} 속성을 통해 지정한다. 작은 값을 지정할수록 원근감이 깊어진다. (역자: 아래 예제의 CSS 속성들은 -moz- 접두어를 가지고 있다. 파이어폭스 브라우저에서 보길 바란다.)

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

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

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

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

3차원 공간에서 2차원 엘리먼트들

더 보기

리비전 소스

 
<p><strong>CSS transform</strong>를 사용하면 다른 엘리먼트에 영향을 미치지 않고 특정 엘리먼트의 위치를 바꿀 수 있다. 몇 가지 CSS 속성을 이용하여 엘리먼트에 아핀 선형 변환을 적용할 수 있다. 여기에는 회전, 비틀기, 확대, 축소, 평면과 3D 공간에서 이동 등이 있다.</p>
<h2 id="CSS_transforms_properties">CSS transforms 속성</h2>
<p>CSS transform에서 가장 중요한 속성은 {{ cssxref("transform") }} 과 {{ cssxref("transform-origin") }} 이다.</p>
<dl>
  <dt>
    {{ cssxref("transform-origin") }}</dt>
  <dd>
    원점의 위치를 지정한다. 기본값은 엘리먼트의 왼쪽 위이다. 회전, 확대, 축소, 비틀기 같이 한 점을 기준으로 수행되는 변환에 대해서 이 속성을 지정할 수 있다.</dd>
  <dt>
    {{ cssxref("transform") }}</dt>
  <dd>
    엘리먼트에 적용될 변환을 지정한다. 몇 가지 변환을 공백으로 구분하여 동시에 적용할 수 있다.&nbsp;</dd>
</dl>
<h2 id="Examples">예제</h2>
<h3 id="Example.3A.C2.A0Rotating">예제: 회전</h3>
<p>이 예제는 구글 홈페이지를 90도 회전하여 보여준다.&nbsp;</p>
<p><a class="internal" href="/@api/deki/files/2921/=rotated-google-sample.html" title="/@api/deki/files/2921/=rotated-google-sample.html">예제 보기</a><br />
  <a class="internal" href="/@api/deki/files/2920/=google-rotated.png" title="/@api/deki/files/2920/=google-rotated.png">스크린샷 보기</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="Example.3A.C2.A0Skewing_and_translating">예제:&nbsp;비틀고 옮기기</h3>
<p>이 예제는 구글 홈페이지를 10도 비틀고 x축으로 150 픽셀만큼 옮겨서 보여준다.</p>
<p><a class="external" href="/@api/deki/files/2922/=skewed-google-sample.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/@api/deki/files/2922/=skewed-google-sample.html">예제 보기</a><br />
  <a class="internal" href="/@api/deki/files/2923/=skewed-google.png" title="/@api/deki/files/2923/=skewed-google.png">스크린샷 보기</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_specific_CSS_properties">3D 관련 CSS 속성</h2>
<p>CSS 속성을 공간에서 지정하는건 조금 까다롭다. 먼저 시점을 주고 2차원 엘리먼트가 보일지 결정한다.</p>
<h3 id="Setting_up_a_perspective">시점 정하기</h3>
<p>먼저 정해야할건 <em>시점</em>이다. 시점 때문에 3차원 공간의 느낌이 난다. 엘리먼트가 사용자로부터 멀어질수록 작아진다.</p>
<p>멀어질수록 얼마나 빨리 작아질지는 {{ cssxref("perspective") }} 속성을 통해 지정한다. 작은 값을 지정할수록 원근감이 깊어진다. (역자: 아래 예제의 CSS 속성들은 -moz- 접두어를 가지고 있다. 파이어폭스 브라우저에서 보길 바란다.)</p>
<div>
  <table class="standard-table">
    <tbody>
      <tr>
        <td><code>perspective:0;</code></td>
        <td><code>perspective:250px;</code></td>
        <td><code>perspective:300px;</code></td>
        <td><code>perspective:350px;</code></td>
      </tr>
      <tr>
        <td>
          <div class="container" style="width:200px;height:200px;margin:75px 0 0 75px;border:none;">
            <div class="cube" style="width:100%;height:100%;-moz-perspective:0;-moz-transform-style:preserve-3d;-moz-perspective-origin:150% 150%;">
              <div class="middle" style="display: block;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: transparent;">
                &nbsp; &nbsp;</div>
              <div class="front" style="display: block;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: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );">
                1</div>
              <div class="back" style="display: block;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: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );">
                2</div>
              <div class="right" style="display: block;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: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );">
                3</div>
              <div class="left" style="display: block;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: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px );">
                4</div>
              <div class="top" style="display: block;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: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );">
                5</div>
              <div class="bottom" style="display: block;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: rgba( 196,   0, 196, 0.7);-moz-transform: rotateX(-90deg) translateZ( 50px );">
                6</div>
            </div>
          </div>
        </td>
        <td>
          <div class="container" style="width:200px;height:200px;margin:75px 0 0 75px;border:none;">
            <div class="cube" style="width:100%;height:100%;-moz-perspective:250px;-moz-transform-style:preserve-3d;-moz-perspective-origin:150% 150%;">
              <div class="middle" style="display: block;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: transparent;">
                &nbsp; &nbsp;</div>
              <div class="front" style="display: block;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: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );">
                1</div>
              <div class="back" style="display: block;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: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );">
                2</div>
              <div class="right" style="display: block;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: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );">
                3</div>
              <div class="left" style="display: block;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: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px );">
                4</div>
              <div class="top" style="display: block;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: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );">
                5</div>
              <div class="bottom" style="display: block;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: rgba( 196,   0, 196, 0.7);-moz-transform: rotateX(-90deg) translateZ( 50px );">
                6</div>
            </div>
          </div>
        </td>
        <td>
          <div class="container" style="width:200px;height:200px;margin:75px 0 0 75px;border:none;">
            <div class="cube" style="width:100%;height:100%;-moz-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspective-origin:150% 150%;">
              <div class="middle" style="display: block;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: transparent;">
                &nbsp; &nbsp;</div>
              <div class="front" style="display: block;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: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );">
                1</div>
              <div class="back" style="display: block;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: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );">
                2</div>
              <div class="right" style="display: block;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: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );">
                3</div>
              <div class="left" style="display: block;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: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px );">
                4</div>
              <div class="top" style="display: block;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: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );">
                5</div>
              <div class="bottom" style="display: block;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: rgba( 196,   0, 196, 0.7);-moz-transform: rotateX(-90deg) translateZ( 50px );">
                6</div>
            </div>
          </div>
        </td>
        <td>
          <div class="container" style="width:200px;height:200px;margin:75px 0 0 75px;border:none;">
            <div class="cube" style="width:100%;height:100%;-moz-perspective:350px;-moz-transform-style:preserve-3d;-moz-perspective-origin:150% 150%;">
              <div class="middle" style="display: block;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: transparent;">
                &nbsp; &nbsp;</div>
              <div class="front" style="display: block;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: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );">
                1</div>
              <div class="back" style="display: block;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: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );">
                2</div>
              <div class="right" style="display: block;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: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );">
                3</div>
              <div class="left" style="display: block;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: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px );">
                4</div>
              <div class="top" style="display: block;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: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );">
                5</div>
              <div class="bottom" style="display: block;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: rgba( 196,   0, 196, 0.7);-moz-transform: rotateX(-90deg) translateZ( 50px );">
                6</div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<p>다음으로 지정해야할 요소는 관찰자의 위치이다. {{ cssxref("perspective-origin") }} 속성을 통해 지정한다. 기본 값으로 관찰자의 중심이다.</p>
<div>
  <table class="standard-table">
    <tbody>
      <tr>
        <td><code>perspective-origin:150px 150px;</code></td>
        <td><code>perspective-origin:50% 50%;</code></td>
        <td><code>perspective-origin:-50px -50px;</code></td>
      </tr>
      <tr>
        <td>
          <div class="container" style="width:100px;height:100px;margin:25px;border:none;">
            <div class="cube" style="width:100%;height:100%;-moz-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspective-origin:150% 150%;">
              <div class="front" style="display: block;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: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );">
                1</div>
              <div class="back" style="display: block;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: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );">
                2</div>
              <div class="right" style="display: block;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: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );">
                3</div>
              <div class="left" style="display: block;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: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px );">
                4</div>
              <div class="top" style="display: block;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: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );">
                5</div>
              <div class="bottom" style="display: block;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: rgba( 196,   0, 196, 0.7);-moz-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:100%;height:100%;-moz-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspective-origin:50% 50%;">
              <div class="front" style="display: block;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: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );">
                1</div>
              <div class="back" style="display: block;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: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );">
                2</div>
              <div class="right" style="display: block;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: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );">
                3</div>
              <div class="left" style="display: block;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: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px );">
                4</div>
              <div class="top" style="display: block;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: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );">
                5</div>
              <div class="bottom" style="display: block;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: rgba( 196,   0, 196, 0.7);-moz-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:100%;height:100%;-moz-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspective-origin:-50% -50%;">
              <div class="front" style="display: block;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: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );">
                1</div>
              <div class="back" style="display: block;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: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );">
                2</div>
              <div class="right" style="display: block;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: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );">
                3</div>
              <div class="left" style="display: block;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: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px );">
                4</div>
              <div class="top" style="display: block;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: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );">
                5</div>
              <div class="bottom" style="display: block;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: rgba( 196,   0, 196, 0.7);-moz-transform: rotateX(-90deg) translateZ( 50px );">
                6</div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<p>여기까지 왔다면 공간에서도 문제 없을 것이다.</p>
<h3 id="2D_elements_in_the_3D_space">3차원 공간에서 2차원 엘리먼트들</h3>
<h2 id="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>
현재 리비전 복원