변환 원점
변환 원점 (Transform Origin)
요소의 변환(transform)이 일어나는 기준점(원점)을 정해주는 유틸리티예요. 어느 지점을 중심으로 회전하거나 기울어지는지를 조절할 수 있어요.
출처: 문서
본문
클래스 & 스타일 (Class Styles)
origin-center
transform-origin: center;
origin-top
transform-origin: top;
origin-top-right
transform-origin: top right;
origin-right
transform-origin: right;
origin-bottom-right
transform-origin: bottom right;
origin-bottom
transform-origin: bottom;
origin-bottom-left
transform-origin: bottom left;
origin-left
transform-origin: left;
origin-top-left
transform-origin: top left;
origin-(<custom-property>)
transform-origin: var(<custom-property>);
origin-[<value>]
transform-origin: <value>;
예시 (Examples)
기본 예제 (Basic example)
요소가 회전할 때 기준이 되는 원점을 정하려면 origin-center 같은 유틸리티를 사용해요.
<button class="origin-top-right rotate-45 ...">
Save changes
</button>
원점은 요소의 모서리나 중심 같은 위치로 지정할 수 있어요.
origin-center
transform-origin: 50% 50%; — 요소의 중심
origin-top
transform-origin: 50% 0%; — 위쪽 중앙
origin-top-right
transform-origin: 100% 0%; — 오른쪽 위 모서리
이런 식으로 요소의 어떤 위치를 기준점으로 삼을지 골라서 회전, 크기 변경, 기울임 등을 원하는 축을 중심으로 일으킬 수 있어요.
커스텀 값 사용하기 (Using a custom value)
origin-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 변환 원점을 설정할 수 있어요.
<button class="origin-[35%_60%] rotate-45 ...">
Save changes
</button>
CSS 변수를 쓸 때는 origin-(<custom-property>) 문법을 사용할 수도 있어요.
<button class="origin-(--my-transform-origin) rotate-45 ...">
Save changes
</button>
이것은 origin-[var(<custom-property>)]의 줄임 표현이에요. var() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.