transform

1.transform

요소의 변형(이동,회전,크기 조절 등)을 다루는 데 사용된다

transform function	설명	단위
translate(x,y)	요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다	px,%,em 등
translateX(n)	요소의 위치를 X축으로 x만큼 이동시킨다	px,%,em
translateY(n)	요소의 위치를 Y축으로 y만큼 이동시킨다	px,%,em
scale(x,y)	요소의 크기를 X축으로 x배,Y축으로 y배 확대 또는 축소 시킨다	0과 양수
scaleX(n)	요소의 크기를 X축으로 x배 확대 또는 축소 시킨다	0과 양수
scaleY(n)	요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다	0과 양수
skew(x-angle,y-angle	요소를 X축으로 x 각도만큼, Y축으로 y각도만큼 기울인다	+/-각도(deg
skewX(x-angle)	요소를 X축으로 x 각도만큼 기울인다	+/-각도(deg
skewX(y-angle)	요소를 Y축으로 y 각도만큼 기울인다	+/-각도(deg
rotate(angle)	요소를 angle만큼 회전시킨다	+/-각도(deg

---

번외) transform을 이용하여 중앙정렬

<style>
    .pop-up {
      position: fixed;
      width: 100px;
      height: 100px;
      background-color: red;
      top: 50%;
      left: 50%;
      z-index: 999;
      transform: translate(-50%, -50%);
      /* position: abslute, top:50%, left 50% 필수 */
      /* 중앙정렬 위치이동 */
    }
</style>

2.transform-origin

요소의 변형이 발생할 때 변형의 기준점(origin)을 지정하는데 사용
요소의 변형이란 이동, 회전, 크기 조정 등과 같은 변형 효과를 적용하는 것을 말한다

<style>
    .div {
      width: 100px;
      height: 100px;
      background-color: red;
      transform-origin: top right;
      transform: rotate(12deg);
      /* div 요소의 오른쪽 상단을 변형 기준점으로
         설정한 후 45도만큼 회전을 적용한다*/
    }
</style>