CSS 2차원 변형, CSS 2차원 움직임

1. CSS 2차원 변형 속성

  ㅇ 박스를 이동(translate),회전(rotate),확대/축소(scale),기울임(skew) 등 변형을 함(움직임을 줌)

  ㅇ 문법 형식
     - { transform : translate() / rotate() / scale() / skew() / matrix() } 

  ㅇ 사용 例)
     - translate(x,y)
        . 例) { transform : translate(20px,30px); } => 우측으로 20px,아래로 30 px 이동
     - translateX(x) : X축 기반으로 움직임을 줌
     - translateY(y) : Y축 기반으로 움직임을 줌
     - rotate(도)
        . 例) { transform : rotate(20deg); } => 20도 회전
     - scale(x,y)
        . 例) { transform : scale(0.5, 1.5); } => 가로 50% 축소, 세로 150% 확대
     - scaleX(x) : X축 기반으로 확대/축소시킴
     - scaleY(y) : Y축 기반으로 확대/축소시킴
     - skew(x 도,y 도)
        . 例) { transform : skew(20deg, 30deg); } => 가로 20도 기울임, 세로 30도 기울임
     - skewX(x 도) : X축 기반으로 기울임
     - skewY(y 도) : Y축 기반으로 기울임
     - matrix(scaleX,skewY,skewX,scaleY,translateX,translateY)
        . 例) { transform : matrix(0.5, 30deg, 20deg, 1.5, 20px, 30px); } => 
                   scaleX,skewY,skewX,scaleY,translateX,translateY 순서대로 한꺼번에 적용