transform-origin 속성
transform-origin 속성은
transform 속성으로 정의되는
요소 변형이 발생하는 기준점을 설정합니다.
기본적으로 이 점은 요소의 중심이며,
예를 들어 회전은 요소의 중심을 기준으로 발생합니다.
그러나 이 동작을 변경하여 요소가 자신의 측면,
코너 또는 요소 외부에 있는 점을 기준으로
회전하도록 만들 수 있습니다.
구문
선택자 {
transform-origin: X-축 Y-축 Z-축;
}
Y 및 Z 축 값은 필수가 아니므로 생략할 수 있습니다 (기본값을 가집니다). Z 축을 따라 기준점을 이동시키는 것은 3D 변형에 필요합니다.
X 축 값
| 값 | 설명 |
|---|---|
| CSS 단위 | 값은 요소 왼쪽 경계로부터 변형 중심의 오프셋을 설정하는 크기 단위입니다. 양수 값은 변형 중심을 요소 내부로(오른쪽으로) 이동시키고, 음수 값은 요소 외부로(왼쪽으로) 이동시킵니다. |
left |
가로 방향 회전 점이 요소의 왼쪽 경계에 위치합니다. |
right |
가로 방향 회전 점이 요소의 오른쪽 경계에 위치합니다. |
center |
가로 방향 회전 점이 요소의 중심에 위치합니다. |
기본값: center.
Y 축 값
| 값 | 설명 |
|---|---|
| CSS 단위 | 값은 요소 상단 경계로부터 변형 중심의 오프셋을 설정하는 크기 단위입니다. 양수 값은 변형 중심을 요소 내부로(아래로) 이동시키고, 음수 값은 요소 외부로(위로) 이동시킵니다. |
top |
세로 방향 회전 점이 요소의 상단 경계에 위치합니다. |
bottom |
세로 방향 회전 점이 요소의 하단 경계에 위치합니다. |
center |
세로 방향 회전 점이 요소의 중심에 위치합니다. |
기본값: center.
Z 축 값
| 값 | 설명 |
|---|---|
| CSS 단위 | 값은 요소 평면으로부터 변형 중심의 오프셋을 설정하는 크기 단위입니다. 양수 값은 변형 중심을 사용자 쪽으로(화면 평면에서 앞으로) 이동시키고, 음수 값은 반대 방향으로 이동시킵니다. |
기본값: 0px.
예시
현재 transform-origin 속성 값이 설정되지 않아 블록은 자신의 중심을 기준으로 회전합니다. 효과를 보려면 블록에 마우스를 올려보세요:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
예시
이제 마우스를 올리면 블록이 왼쪽 상단 모서리를 기준으로 회전합니다:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
예시
이제 마우스를 올리면 블록이 오른쪽 하단 모서리를 기준으로 회전합니다.
이를 위해 변형 기준점을 오른쪽으로 100%,
아래로 100% 이동시켜야 합니다
(px로도 지정할 수 있지만, 요소 크기가 변경되면
변형 기준점은 제자리에 남아 있으므로 %가 더 좋습니다):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
예시
블록을 오른쪽 상단 모서리를 기준으로 회전시킵니다:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
예시
블록을 왼쪽 측면의 중심을 기준으로 회전시킵니다.
이를 위해 X축에는 left (회전 점이 왼쪽에 위치),
Y축에는 center (회전 점이 수직 중심에 위치)를 설정합니다:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
예시
이 속성은 회전뿐만 아니라 다른 변형에도 적용할 수 있습니다.
왼쪽 하단 모서리를 변형 기준점으로 설정하고
scale를 사용해 크기를 확대해 봅시다:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left bottom;
transform: scale(1.5);
}
:
예시
이번에는 오른쪽 상단 모서리를 변형 기준점으로 설정합니다:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: right top;
transform: scale(1.5);
}
:
예시
변형 기준점은 요소 외부에 지정할 수도 있습니다. 다음 예시에서 빨간색 블록에 마우스를 올리면 검은색 블록이 외부에 있는 점을 기준으로 회전합니다:
<div id="hover"></div>
<div id="elem"></div>
#hover {
border: 1px solid red;
width: 50px;
height: 50px;
}
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
transition: transform 1s;
transform-origin: -100px -100px;
}
#hover:hover + #elem {
transform: rotate(30deg);
}
:
