[CSS] transform 속성

사용자에게 특정 팝업(div로 만드는 간단한 팝업)을 보여주려고 하는데, 우선 중앙정렬 하도록 하기 위해서 최상단 div 태그에 top: 50%;, left: 50%; 로 지정해주었다. 그런데 몇 십 픽셀 정도 묘하게 어긋나서 이유를 알아보니 div의 왼쪽 상단 모서리를 기준으로 위치가 산정되기 때문이었다.

이 때 사용하면 좋은 것이 transform 속성이다. transform은 요소에 이동(transform), 회전(rotate), 확대/축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다. 애니메이션이 필요하다면 트랜지션이나 애니메이션과 함께 사용하고, 아무것도 사용하지 않으면 바로 해당 속성이 적용되어 렌더링 될 것이다.

 

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)
skewY(y-angle)	요소를 Y축으로 y 각도만큼 기울인다.	+/- 각도(deg)
rotate(angle)	요소를 angle만큼 회전시킨다.	+/- 각도(deg)

 

내가 사용한 방식

아래와 같이 작성하면 viewport를 기준으로 상하좌우 가운데 배치된다.

.pop-up {
  position: fixed;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  z-index: 999;
  transform: translate(-50%, -50%);
}

 

참고 자료

https://poiemaweb.com/css3-transform

CSS3 Transform | PoiemaWeb