[CSS] transform-origin

transform-origin

translate, rotate, scale, skew 등, trasnform의 속성들은 지정 요소의 중심을 기준으로 동작을 시작한다.

이런 기준점을 trasform-origin을 이용하면 변경이 가능하다.

transform-origin: x축, y축;      // px, 백분율(%), left, center, right를이용한다.

 

45도 시계방향 회전을 예시로 주었다.

1. 백분율 (%)로 기준점을 변경할 경우

 

transform-origin: 0% 0%; 박스의 왼쪽 상단 모서리에 위치한다.

transform-origin: 100% 100%; 박스의 오른쪽 하단 모서리에 위치한다.

 

40% 60% 일 경우, 오른쪽에서 40% 아래쪽으로 60%인 곳에 위치하게 된다.

빨간 원을 기준으로 시계방향으로 45도 회전

2. right, center, left를 이용하여 기준점을 변경할 경우

빨간 원을 기준으로 시계방향으로 45도 회전

3. 정리

 

transform-origin: top center; 일 경우 (center top) , (50% 0%) , (top) 으로 대체 가능하다. 

 

top, center, right 등은 자리를 바꿔줘도 상관 없다.

( 예시 )