[CSS] transform의 속성 (translate, rotate, scale 등) 기준점 설정하기 - transform-origin

transform의 기준점 설정하기

 

transform의 다양한 속성 값들 translate, rotate, scale을 사용하다 보면 기준점을 정해야 할 때가 있습니다. 어디를 기준으로 이동, 회전등 요소를 변형할 것인지를 정할 수 있는 속성이 바로 transform-origin입니다. 

 

 

 

 

transform-origin

 

transform의 기준점을 설정할 수 있는 속성으로, 속성값은 다음과 같습니다. 

 

// 2D transformation
transform-origin: x-axis y-axis;
 
// 3D transformation
transform-origin: x-axis y-axis z-axis;

 

2D transformation을 사용할 경우, 기준점이 될 좌표의 x축과 y축 값을 속성 값으로 넣습니다. 3D transformation의 경우 z축을 추가할 수 있습니다. 만약 transform-origin을 설정하지 않았을 경우 default 값은 50% 50% 0입니다. 

 

 

 

 

 

사용 예시 - 오른쪽 위를 기준점으로 회전하기

 

See the Pen transform-origin Example by KimMiJin (@console_log) on CodePen.

 

 

 

 

 

참고 사이트: https://www.w3schools.com/cssref/css3_pr_transform-origin.asp

https://gahyun-web-diary.tistory.com/44

 

 

공부한 것을 정리한 내용입니다. 수정할 부분이 있다면 알려주시면 감사하겠습니다 :)