이미지 무한 회전 애니메이션 CSS

로고나 이미지를 연속적으로 회전시키는 애니메이션 효과를 주고 싶은 경우 다음과 같은 CSS 코드를 활용할 수 있습니다.

HTML 코드:

<img id="rotating_img" src="이미지 경로 URL">

CSS 코드:

#rotating_img {
    -webkit-animation: rotation 2s infinite linear;
}


@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}

실제 작동을 다음 jsfiddle에서 확인해볼 수 있습니다.

• http://jsfiddle.net/1uj0e74r/

위의 코드는 다음 Stackoverflow 글에서 인용했습니다. 다음 글에서 자세한 내용을 살펴보시기 바랍니다.

• CSS3 Continuous Rotate Animation (Just like a loading sundial)

워드프레스에 CSS 코드를 추가하는 방법은 "워드프레스에서 CSS 추가하는 방법"을 참고해보세요.

참고:

• 대문자로 또는 소문자로 바꾸는 CSS 속성 - text-transform