CSS transform-origin 속성이란?
transform-origin 속성은 CSS에서 요소가 변형(transform)될 때의 기준점(원점)을 지정하는 속성입니다. 기본적으로 회전, 확대·축소, 기울이기 같은 모든 변형은 요소의 정중앙을 기준으로 실행됩니다. 하지만 이 속성을 활용하면 변형이 시작되는 원점을 자유롭게 변경할 수 있어, 훨씬 다양하고 정교한 시각 효과를 구현할 수 있습니다.
기본값과 동작 원리
transform-origin의 기본값은 50% 50%로, 요소의 정중앙을 의미합니다. 첫 번째 값은 X축(가로) 위치를, 두 번째 값은 Y축(세로) 위치를 나타내며, 아래와 같은 단위로 지정할 수 있습니다.
- 키워드: top, bottom, left, right, center
- 백분율: 요소 크기를 기준으로 한 비율 (예: 30% 40%)
- 길이 단위: px, em 등 절대 좌표 값
예제 코드
다음 코드를 직접 실행해 보면 transform-origin 속성이 실제로 어떻게 작동하는지 확인할 수 있습니다. 가장 안쪽의 파란색 상자는 rotate(10deg)로 회전되는데, transform-origin: 30% 40% 설정 덕분에 중심이 아닌 지점을 축으로 삼아 기울어지는 것을 볼 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo1 {
width: 300px;
height: 300px;
background-color: yellow;
}
.demo2 {
width: 200px;
height: 200px;
background-color: orange;
}
.demo3 {
width: 100px;
height: 100px;
background-color: blue;
transform: rotate(10deg);
transform-origin: 30% 40%;
}
</style>
</head>
<body>
<h1>Rotation</h1>
<div class = "demo1">Demo
<div class = "demo2">Demo
<div class = "demo3">
Demo
</div>
</div>
</div>
</body>
</html>
코드 구조 살펴보기
- .demo1 – 노란색 배경의 가장 바깥쪽 컨테이너 (300×300px)
- .demo2 – 주황색 배경의 중간 레이어 (200×200px)
- .demo3 – 파란색 내부 요소로, 10도 회전이 적용되고 transform-origin이 30% 40%로 지정됨
세 개의 div가 중첩된 구조로 되어 있어, 각 레이어의 크기 차이를 통해 transform-origin이 적용된 회전 결과를 한눈에 비교하기 좋습니다.
활용 팁
transform-origin은 특히 애니메이션과 인터랙티브 UI를 만들 때 강력한 도구입니다. 예를 들어 문이 열리는 듯한 효과를 낼 때는 왼쪽 가장자리(left center)를 기준점으로 설정하고, 시계 바늘이나 회전 메뉴 버튼을 만들 때는 원하는 축 위치를 지정하면 됩니다. transform 속성과 함께 조합하여 사용하면 훨씬 자연스럽고 전문적인 모션 그래픽을 구현할 수 있습니다.