[CSS] transform-origin 이란? :: 마이구미

이 글은 CSS 속성 중 transform-origin 에 대해 다룬다.
이해는 하고 있지만, 직접 사용해본 경험이 없을 수 있다.
와닿을 수 있는 활용 사례를 알고 싶다면 도움을 될 것이다.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

 

transform-origin 속성은 CSS 속성 중 transform 와 함께 사용하는 속성이다.

요소의 transform 을 위한 기준점을 정하기 위해 사용된다.

기본적으로 transform-origin 속성의 기본값은 중앙(center) 이다.

transform-origin: 50%, 50%

 

 

좌표를 기반으로 transform 의 기준점은 위와 같은 그림으로 이해할 수 있다.

그렇다면, 실제로는 transform-origin 속성이 적용된 예제를 확인해보자.

 

 

 

hover 시점에 요소의 크기를 정해진 크기를 transform: scale(1.2) 을 사용하여  1.2 배 증가시키는 예제이다.

그리고 각 요소의 transform-origin 의 값은 다르게 지정되었다.

기본값인 (50%, 50%) 의 경우에는 일반적으로 우리가 상상한 사방으로 늘어나는 모습을 볼 수 있다.

그리고 다른 값들은 기준점에 맞춰서 증가되는 모습을 볼 수 있다.

 

위와 같은 예제들만 봐도 transform-origin 속성의 역할은 쉽게 이해할 수 있다.

하지만 이 속성을 활용하는 구현 사례는 이것만으로 추측하기는 쉽지 않다.

그렇다면 어떤 사례에서 활용할 수 있을까?

 

우리가 실제로 사용할 수 있는 예제에 가깝다고 생각이 들어 아래 사례를 가져왔다.

ant.d 의 Popover 컴포넌트이다.

 

 

예제는 보다시피 Popover 는 scale 애니메이션이 적용된 모습을 볼 수 있다.

자세히 보면, 각 버튼에 따라 scale 의 증가 및 감소하는 위치가 화살표를 기준으로 동작하는 것을 볼 수 있다.

보여지는 시점에는 버튼에서 빠져나온 애니메이션, 사라지는 시점에는 버튼으로 빨려들어가는 애니메이션을 표현하고 있다.

 

만약, transform-origin 값을 기본값으로 그대로 사용했다면, 빠져나오거나 빨려들어가지 않고 그냥 공중에서 사라지게 된다.

Button 과 Popover 의 관계에 있어서, 굉장히 어울리지 않는 모습이 표현된다.

 

 

결과적으로 이처럼 transform 기준점의 값을 변경하여 위와 같은 애니메이션을 만들어낼 수 있게 된다.