본문 바로가기

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

2019. 11. 12. 댓글 15

로고나 이미지를 연속적으로 회전시키는 애니메이션 효과를 주고 싶은 경우 다음과 같은 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에서 확인해볼 수 있습니다.

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

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

참고:

※일부 글에 제휴 링크가 포함될 수 있습니다.

댓글15