6.8.2 transform-origin 속성
앞에서 설명한 rotate() 함수는 작동 원리가 매우 간단합니다. 그런데 여기서 회전의 중심을 눈여겨봐야 합니다. 실행결과를 보면 요소가 회전할 때 요소의 중심을 기준으로 회전합니다. 이처럼 변형 관련 속성값들은 변형을 시작하는 기준점이 있습니다. 이 기준점은 항상 요소의 중심입니다. 그래서 기준점을 바꾸면 변형 효과가 다르게 적용됩니다. 변형 기준점은 transform-origin 속성으로 변경할 수 있습니다.
형식
transform-origin:<x축 위치> <y축 위치>;
속성값에는 x축의 기준 위치와 y축의 기준 위치를 넣습니다. 위치는 % 단위나 정해진 키워드를 넣으면 되는데, 해당 속성에서 사용할 수 있는 키워드는 다음 표와 같습니다.
표 6-27 transform-origin 속성값
|
축 |
속성값 |
설명 |
|
x축 |
left |
왼쪽을 기준점으로 잡습니다. |
|
center |
중앙을 기준점으로 잡습니다. |
|
|
right |
오른쪽을 기준점으로 잡습니다. |
|
|
y축 |
top |
위쪽을 기준점으로 잡습니다. |
|
center |
중앙을 기준점으로 잡습니다. |
|
|
bottom |
아래쪽을 기준점으로 잡습니다. |