왼쪽 위 모서리를 기준으로 삼고 싶다면 다음과 같이 코드를 추가합니다.
06/08/transform-origin.html
.box:hover{
transform:rotate(30deg);
/* 오른쪽으로 회전 */
transform-origin:top left;
/* 왼쪽 위 모서리를 기준점으로 지정 */
}
그림 6-84 실행결과
코드를 실행하면 변경한 기준점에서 요소가 회전하는 것을 볼 수 있습니다.
왼쪽 위 모서리를 기준으로 삼고 싶다면 다음과 같이 코드를 추가합니다.
06/08/transform-origin.html
.box:hover{
transform:rotate(30deg);
/* 오른쪽으로 회전 */
transform-origin:top left;
/* 왼쪽 위 모서리를 기준점으로 지정 */
}
그림 6-84 실행결과
코드를 실행하면 변경한 기준점에서 요소가 회전하는 것을 볼 수 있습니다.