CSS에서 transform-origin 속성은 요소가 변형(transform)될 때의 기준점을 지정하는 속성입니다. 이 속성에 @keyframes 규칙을 활용하면 회전 기준점 자체를 부드럽게 움직이는 애니메이션 효과를 만들 수 있습니다.
아래 예제에서는 주황색 박스가 45도 회전된 상태에서, transform-origin 값이 애니메이션에 따라 점진적으로 변경되는 모습을 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {
position: relative;
height: 300px;
width: 400px;
border: 2px solid black;
margin: 100px;
padding: 5px;
}
#demo2 {
padding: 30px;
position: absolute;
border: 1px solid black;
background-color: orange;
transform: rotate(45deg);
transform-origin: 30% 10%;
animation: mymove 3s infinite;
}
@keyframes mymove {
30% {
transform-origin: 0 0 0;
}
}
</style>
</head>
<body>
<h1>CSS transform-origin 속성</h1>
<div id = "demo1">
<div id="demo2">Demo</div>
</div>
</body>
</html>코드 설명
위 예제의 핵심 동작 방식은 다음과 같습니다.
1. 외부 컨테이너(#demo1)
검은 테두리를 가진 400×300 크기의 상자로, 내부 요소가 배치될 기준 영역 역할을 합니다.
2. 회전 요소(#demo2)
주황색 배경의 내부 요소로, transform: rotate(45deg)를 통해 45도 회전되어 있습니다. 초기 transform-origin 값은 30% 10%로 설정되어 요소의 왼쪽 상단 부근을 기준으로 회전합니다.
3. @keyframes로 기준점 애니메이션
mymove라는 이름의 키프레임은 3초 주기로 무한 반복되며, 애니메이션 구간의 30% 시점에 transform-origin 값을 0 0 0(왼쪽 상단 꼭짓점)으로 변경합니다. 이로 인해 회전 기준점이 부드럽게 이동하는 효과가 나타납니다.
이처럼 transform-origin은 일반적으로 정적인 속성으로 사용되지만, CSS 애니메이션과 결합하면 요소의 회전 중심을 동적으로 조절하는 독특한 시각 효과를 구현할 수 있습니다.