CSS 애니메이션으로 요소를 원형 경로로 움직이는 방법

CSS 애니메이션은 transform 속성의 회전(rotate)과 이동(translate)을 조합하여 요소를 다양한 방식으로 변형할 수 있게 해줍니다.

그중에서도 회전과 이동을 함께 사용하면 별도의 JavaScript 없이 순수 CSS만으로 요소가 원형 경로를 따라 움직이는 효과를 만들 수 있습니다. 핵심 원리는 부모 기준점을 중심으로 요소를 360도 회전시키면서, 동시에 일정 거리만큼 떨어진 상태(translateX)를 유지하는 것입니다. 이렇게 하면 요소가 마치 실에 묶인 추처럼 중심축을 돌며 원을 그리게 됩니다.

예제 코드

아래 예제는 빨간색 정사각형 요소가 화면에서 원형 궤도를 따라 계속 회전하는 모습을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 8%;
    width: 35px;
    height: 35px;
    border-radius: 5px;
    background: red;
    animation: move 3s infinite linear;
}
@keyframes move {
    0% {
        transform: rotate(0deg) translateX(40px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(40px) rotate(-360deg);
    }
}
</style>
</head>
<body>
<div></div>
</body>
</html>

코드 설명

animation: move 3s infinite linear; — 'move'라는 이름의 키프레임 애니메이션을 3초 동안 무한 반복하되, 일정한 속도(linear)로 실행합니다.
rotate(0deg) → rotate(360deg) — 요소 자체를 한 바퀴 회전시켜 원형 궤도를 만듭니다.
translateX(40px) — 회전 축으로부터 40px 떨어진 위치에 요소를 배치합니다. 이 값이 곧 원의 반지름이 됩니다.
rotate(-360deg) — 마지막 역회전을 추가하면 요소가 궤도를 도는 동안 제 방향을 유지하게 됩니다. 이 부분을 생략하면 요소가 회전하면서 함께 뒤집히는 효과가 나타납니다.

실행 결과

위 코드를 실행하면 빨간색 사각형 요소가 화면에서 시계 방향으로 원을 그리며 끊임없이 공전하는 것을 확인할 수 있습니다.

CSS 애니메이션으로 요소를 원형 경로로 움직이는 방법

반지름을 조절하고 싶다면 translateX() 값을 변경하면 되고, 회전 속도를 바꾸려면 animation의 지속 시간(3s)을 수정하면 됩니다. 이 기법은 로딩 스피너, 위성 궤도 시각화, 캐러셀 등 다양한 UI 요소에 응용할 수 있습니다.