Transform

▼transform (변형)
>크기(scale), 이동(translate), 회전(rotate), 기울기(skew) 변형 가능

▷크기 (scale)
-scale('숫자') > 숫자만큼 ''커짐
 ㄴex)
    .box1{transform:scale(2);} > 두배로 커짐

-scaleX('숫자') > X축만 커짐
 ㄴex)
    .box1{transform:scaleX(2);} > X축만 두배로 커짐

-scale('소수점') > 숫자만큼 ''줄어듦
 ㄴex)
    .box1{transform:scale(0.5);} > 반으로 줄어듦

-scale('숫자, 숫자') > 가로, 세로 비율이 다르게 커짐
 ㄴex)
    .box1{transform:scale(1.2, 2);} > 가로는 1.2배 세로는 2배 커짐


▷이동 (translate)
>단위는 px 또는 %를 사용

-px사용해서 오른쪽으로 이동시키기
 ㄴex)
    .box3{transform:translate(100px);} > 오른쪽으로 100px 이동

-%사용해서 오른쪽으로 이동시키기 > 본인 크기의 %만큼 이동함
 ㄴex)
    .box3{transform:translate(50%);} > 오른쪽으로 50% 이동

-px사용해서 왼쪽으로 이동시키기 > 숫자 앞에 '-' 넣기
 ㄴex)
    .box3{transform:translate(-100px);} > 왼쪽으로 100px 이동

-한번에 X, Y축 이동시키기 > 숫자 중간에 ',' 넣기
 ㄴex)
    .box3{transform:translate(100px, 50px );} > X축 100px 이동, Y축 50px 이동
    .box3{transform:translate(100%, 50%);} > X축 100% 이동, Y축 50% 이동
-X, Y축만 이동시키기
 ㄴex)
    .box3{transform:translateX(100px);} > X축만 100px 이동
    .box3{transform:translateY(100px);} > Y축만 100px 이동


▷회전 (rotate)
>단위는 'deg'를 사용하고 시계방향으로 돌아감 '-숫자' 사용시 반시계로 돌아감

-시계방향 회전 시키기
  ㄴex)
     .box2{transform:rotate(45deg);} > 시계 방향으로 45도 돌아감
-반시계방향 회전 시키기
  ㄴex)
     .box2{transform:rotate(-45deg);} > 반시계 방향으로 45도 돌아감


▷기울기 (skew)
>단위는 'deg'를 사용하고  '-숫자' 사용시 반대로 기울어짐
>기본 X축으로 기울고 Y축으로 기울이려면 'skewY'사용

-기울이기
  ㄴex)
    .box4{transform:skew(-40deg);} > X축으로 -40도 기울어짐
-Y축으로 기울이기
  ㄴex)
    .box4{transform:skewY(40deg);} > Y축으로 40도 기울어짐


▼변화하는 중간과정 보기
>hover가 아닌 원본 태그에 줘야함
>transition: 숫자s;
  ㄴex)
    .box5{transition:2s;} > box5의 변화가 2초동안 보임