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

2019. 11. 12. 12:11 | 댓글 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 추가하는 방법"을 참고해보세요.

참고:

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    [찌쏘]'s Magazine

    요거 나중에 기회되면 써먹어봐야겠네요 ^^

  2. thumbnail
    Deborah

    아 이런것도 있군요. 새로운것을 배웁니다. 오랜만이네요. 잘 지내셨나요?

  3. thumbnail
    인생2막은 EnJoY

    컴퓨터의 세계에서는 뭐든지 가능할 것 같네요~!!
    잘보고 공감하고 갑니당~^^

  4. thumbnail
    空空(공공)

    댓글 아이콘이 빙글빙글 돌아가는군요..ㅎㅎ

  5. thumbnail
    IT세레스

    오 신기하네요.ㅋㅋㅋ

  6. thumbnail
    2019.11.13 17:37

    비밀댓글입니다

  7. thumbnail
    2019.11.13 19:16

    비밀댓글입니다

  8. thumbnail
    내로라하다

    역시 멋지십니다. ^^ 근데 ie가 안 된다니 ㅜㅜ 안타깝네요.