【CSS】transform-origin 속성

transform-origin은 CSS transform 속성과 함께 사용되는 속성으로서, 회전 중심(원점·기준점)을 지정합니다.

rotate(), skew() 등의 회전, 변형 속성을 사용하기 전에 기준점을 지정해 둡니다. 초기 값은 50% 50%으로 요소의 중심점이 됩니다.

transform-origin의 속성 값은 백분율(%)과 키워드 중 하나로 지정할 수 있습니다.

transform-origin : 0 % 0 %, (또는 간단하게 0 0)의 경우, 박스의 왼쪽 상단 모서리에 위치합니다. 100% 100%는 오른쪽 하단 모서리에 설정합니다. 20% 80%는 박스의 오른쪽에 20%, 아래로 80%로 설정됩니다.

왼쪽 상단 모서리를 중심으로 시계 방향으로 회전

【CSS】transform-origin:0% 0%

</style>
div{
    width:100px;
    height:100px;
    color:#9f9f9f;
}
.transform-origin{
    transform-origin:0% 0%;
    transform:rotate(45deg);
}
</style> 

HTML

</body>
  <div class="transform-origin">회전</div>
</body> 

"transform-origin : 0% 0%;"의 의미는 기준점을 왼쪽(0 % 0 %)에 지정하는 것으로, 그것을 기준으로 45도 회전(시계 방향) 합니다.

백분율 (%)을 "transform-origin : top left"에 다시 해도 결과는 동일합니다.

오른쪽 하단 모서리를 중심으로 반 시계 방향으로 회전

"transform-origin : 100 % 100 %;"의 의미는 기준점이 오른쪽에 있고 그것을 기준으로 -45도 회전 (반 시계 방향) 합니다.

"100 % 100 %"대신 "bottom right;"해도 같은 결과가 됩니다.

【CSS】transform-origin:100% 100%

</style>
.transform-origin{
    transform-origin:100% 100%;
    transform:rotate(-45deg);
}
</style>