CSS - transform-origin

transform 의 변환 원점 기준점은 기본적으로 가운데입니다. 그러나 transform-origin 을 이용하면 x, y 축의 원점을 변경할 수 있습니다.

예를 들어 rotate() 를 이용하면 회전을 하는데, 여기서 회전 중심은 가운데입니다. 이 회전 중심을 바꿀 수 있습니다. 초기 값은 50%, 50% 로 요소의 가운데입니다. 형식은 다음과 같습니다.

transform-origin: x, y

속 성	설 명
transform-origin(x, y)	원점의 기준이 되는 좌표 x: left | center | right | 비율 | 수치 중 하나 y: top | center | bottom | 비율 | 수치 중 하나 Ex.1) transform-origin: top left; Ex.2) transform-origin: 100px 50px; Ex.3) transform-origin: 60% 75%;

transform-origin 을 이용하려면 transform 과 함께 사용해야 합니다.

그림과 같이 left 와 top 은 각 0%, center 는 50%, right 와 bottom 은 각 100% 입니다.

키워드	백분율
left top	0 0
top right	100% 0
center center	50% 50%
left bottom	0 100%
bottom right	100% 100%

키워드	백분율
left center	0 50%
to center	50% 0
bottom center	50% 100%
right center	100% 50%

center center

기본 값입니다. 

<style>
#box01{
  width: 100px;
  height: 100px;
  background-color: #99cc99;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin:50% 50%;
  transform-origin:50% 50%;
}
</style>

<div style="background:#ccc;width:100px;height:100px;">
  <div id="box01"><h4>하보니 PHP</h4></div>
</div>

하보니 PHP

right top

회전 중심을 상단 오른쪽으로 변경합니다.

<style>
#box01{
  width: 100px;
  height: 100px;
  background-color: #99cc99;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin:100% 0;
  transform-origin:100% 0;
}
</style>

<div style="background:#ccc;width:100px;height:100px;">
  <div id="box01"><h4>하보니 PHP</h4></div>
</div>

하보니 PHP

left top

여기서 회전 중심은 왼쪽 상단입니다.

<style>
#box02{
  width: 100px;
  height: 100px;
  background-color: #99cc99;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin:0 0;
  transform-origin:0 0;
}
</style>

<div style="background:#ccc;width:100px;height:100px;">
  <div id="box02"><h4>하보니 PHP</h4></div>
</div>

하보니 PHP

right bottom

회전 중심을 하단 오른쪽으로 변경합니다.

<style>
#box03{
  width: 100px;
  height: 100px;
  background-color: #99cc99;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin:100% 100%;
  transform-origin:100% 100%;
}
</style>

<div style="background:#ccc;width:100px;height:100px;">
  <div id="box03"><h4>하보니 PHP</h4></div>
</div>

하보니 PHP