transform:변형 함수( );

  1. transform:translate(); 위치 변형 함수
  2. transform:scale(); 크기 변형 함수
  3. transform:rotate() ; 회전 변형 함수
  4. transform:skew() ; 기울기 변형 함수

transform-origin: ; 변형의 기준점

기준점이 달라지면 변형의 형태가 달라질 수 있음.
값은 가로방향 세로방향의 순서.

1. transform:translate(); 위치 변형

translateX(600px);

translateY(300px);

translate(600px,350px);

center
부모 { position: relative; } 자신 { position: absolute; top:50%; left: 50%; - 부모 기준으로 중앙에서 시작하기 transform:translate(-50%,-50%); - 자신의 크기 절반만큼 앞과 위로 이동}

2. transform:scale(n,n); 크기 변형 - n이 1보다 작으면 축소, 크면 확대

width: 300px; height: 200px;

transform:scale(1.5,1.5);

transform:scaleX(1.5);

transform:scaleY(1.5);

transform:scale(0.5,0.5);

transform:scale();

transform:scale(1.5,1.5);

transform:scaleX(1.5);

3. transform:rotate() ; 회전 변형 - 단위는 deg. 음수 가능

transform:rotateX(90deg) ;

transform:rotaterotateX(45deg) ;

transform:rotateY(90deg) ;

transform:rotateY(-45deg); ;

transform:rotate(180deg) ;

transform:rotate(180deg) ;

transform:rotate(360deg) ;

transform:rotate(360deg) ;

transform:rotate(-1080deg) ;

transform:rotate(540deg) ;

4. transform:skew() ; 기울기 변형 - 단위는 deg. 음수 가능

transform:skewX(30deg);

transform:skewX(-30deg);

transform:skewY(30deg);

transform:skewY(-30deg);

transform:skew(30deg,30deg);

transform:skew();

5. transform의 중복 적용

2가지 이상 적용시 변형 함수 사이에 한 칸 공백을 두고 적용하면 되는데
함수의 순서에 따라 결과물이 달라질 수 있음

translateX(800px) rotate(1080deg);

rotate(1080deg) translateX(800px);