6.8.2 transform-origin 속성

앞에서 설명한 rotate() 함수는 작동 원리가 매우 간단합니다. 그런데 여기서 회전의 중심을 눈여겨봐야 합니다. 실행결과를 보면 요소가 회전할 때 요소의 중심을 기준으로 회전합니다. 이처럼 변형 관련 속성값들은 변형을 시작하는 기준점이 있습니다. 이 기준점은 항상 요소의 중심입니다. 그래서 기준점을 바꾸면 변형 효과가 다르게 적용됩니다. 변형 기준점은 transform-origin 속성으로 변경할 수 있습니다.

transform-origin:<x축 위치> <y축 위치>;

속성값에는 x축의 기준 위치와 y축의 기준 위치를 넣습니다. 위치는 % 단위나 정해진 키워드를 넣으면 되는데, 해당 속성에서 사용할 수 있는 키워드는 다음 표와 같습니다.

표 6-27 transform-origin 속성값