[Jquery, CSS] 트랜스폼(transform)


Study/Javascript, Jquery, CSS  2016.03.19 01:25

안녕하세요. 명월입니다.


이번 포스트는 CSS의 트랜스폼(transform)에 대해서 공부하겠습니다.


트랜스폼은 요소를 3D 적으로 회전, 확대, 축소하는 스타일을 말합니다. 이야기가 어려우면 아래의 모습과 같은 형태라고 보면 됩니다.

안녕하세요.
명월일지입니다.





트랜스폼의 속성은 transform, transform-origin, perspective, transform-style, perspective-origin, backface-visibility의 총 6가지의 속성을 가지고 있습니다.

저는 transform, transform-origin를 예전부터 잘 알고 있는 속성이네요.. 다른 속성도 찾아 봤지만 사용법이 너무 어려워서 사용하기가 까다로울 것 같습니다...


먼저 transform의 속성은 옵션을 두세 개를 중첩에서 사용할 수도 있습니다.속성으로는 matrix, transrate, scale, rotate, skew가 있고 이 옵션은 각각 3d라는 z 좌표까지 표시할 수 있는 옵션이 있습니다.

예를 들면 transrate는 이동옵션인데 transrate(x,y)는 가로로 x만큼 세로로 y만큼 이동하라 입니다. 그런데 여기에 transrate(x,y,z)를 하면 z축으로도 움직이는 것입니다.


관련 예제 - transrate 예제


저도 이해가 되지 않는 부분이 있어서 설명하기가 무척 어렵네요..일단 간단하게 설명하면 matrix는 총 6개의 좌표에 변형하는 것인데 (x축크기,x축비틀기,x축 이동,y축크기y축비틀기,z축비틀기) 입니다.

모든 걸 합쳤다고 보시면 됩니다. transrate는 이동, scale는 크기, rotate는 회전, skew는 비틀기입니다.

관련 예제를 링크하겠습니다. 참고해 주세요.


관련 예제 - transrate 예제


그럼 저도 관련 예제 하나 만들어 보도록 하죠...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
  </HEAD>
  <BODY>
    <style>
      div#exam1{
        background-color:blue;
        width:100%;
        font-size:20px;
        color:white;
        padding:100px;
      }
      div#exam1.off{
        transition-property:transform;
        transition-duration:1s;
        transform:perspective(100px) rotateX(-90deg);
        transform-origin:top;
      }
      div#exam1.on{
        transition-property:transform;
        transition-duration:1s;
        transform:rotateX(0deg);
        transform-origin:top;
      }
    </style>
    <script>
      function exam1(){
        if($("div#exam1").hasClass("on")){
          $("div#exam1").removeClass("on");
          $("div#exam1").addClass("off");
          return;
        }
        $("div#exam1").removeClass("off");
        $("div#exam1").addClass("on");
        return;
      }
    </script>
    <div id="exam1" class="off">
      명월일지<br />안녕하세요
    </div>
    <input type="button" value="눌러보세요" style="width:100%;" onclick="exam1()">
  </BODY>
</HTML>
명월일지
안녕하세요

위 버튼을 눌러보시면 사각형 박스가 위에서 열리는 것처럼 보이는 효과입니다. 어디선가 메뉴를 저런 효과로 사용한 블로글르 본 적이 있는데 생각이 나서 흉내 내봤습니다.

블로그를 하시는 많은 분이 트랜스폼은 많이 사용하시는데 저는 화려한 걸 좋아하지 않아 잘 사용하지 않는 스타일입니다.

그래도 가끔 포스트 내용 중에 강조할 게 있을 때는 적절히 사용하는 것도 괜찮겠네요.

이번 포스트를 다 작성하고 보니 내용이 부실해 보이네요... 항상 그랬지만.. ㅎㅎ

그래도 오늘은 특히 심하네요. 트랜스폼은 저도 모르는 게 많고 크게 관심도 없을 뿐더라 관련 자료를 찾아 려 해도 자료가 많지 않네요.....


댓글 0개가 달렸습니다.
댓글쓰기