How do I make a looping rotating image?

Question

So I wonder how to rotate a image in HTML, normal speed and using a simple trick. Somebody could help me?

\*Dont know how to do it*\

<img src="https://google.com/favicon.ico"

score 2 · Accepted Answer · answered Aug 16 '22 at 12:43

2

You can rotate a img using transform css property

You can try this

img {
  transform: rotate(0deg);
  animation: rotate 1s infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

    <img src="https://google.com/favicon.ico" />

answered Aug 16 '22 at 12:43

Philo

428
4
11

1

If you add `linear` to the `animation` setting, it will rotate continuously without stopping in between... – Johannes Aug 16 '22 at 12:48

score 1 · Answer 2 · answered Aug 16 '22 at 12:45

img {
    position: absolute;   
    width: 100%;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<img src="https://www.google.com/favicon.ico">

No worries, found it out! Source: https://stackoverflow.com/a/46085346/17699715

score 1 · Answer 3 · answered Aug 16 '22 at 12:46

im not sure if this what you ask for !

.rotate {
  animation: rotation 3s infinite linear;
}

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

<img class="rotate"  width="100" height="100" src="https://google.com/favicon.ico" />

How do I make a looping rotating image?

3 Answers3