CSS에서 360도로 계속 회전하는 이미지 구현

HTML

...
<div class="logo-area">
	<img src="img.png" class="infinite_rotating_logo">
</div>
...

CSS

img.infinite_rotating_logo{
    animation: rotate_image 10s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes rotate_image{
	100% {
    	transform: rotate(360deg);
    }
}

transform-origin의 50% 50%은 회전의 중심 위치를 나타내는데, 완전 원형으로 회전시키려면 이미지 파일의 정중앙에 회전시키려는 중심이 위치 해야한다.

 

만약 이미지가 중심위치에서 상하좌우 비대칭이라면 다른 이미지 편집 툴을 사용하여 대칭으로 맞춰줘야 한다.

 

animation 특성의 10s는 time period를 뜻하는데, 적을수록 빠르게 회전하므로 적절히 조절하여 설정해주면 됨