How to make an image rotate

Asked

Viewed 8,087 times

4

need to make an image rotate infinitely with only HTML and CSS it is possible if yes how it can be done.

html5 css3

1 answer

5


A similar question on the Soen went against his doubt:

HTML:

<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

CSS:

.image {
    position: absolute;
    /**top: 50%;**/
    /**left: 50%;**/
    width: 120px;
    height: 120px;
    /**margin:-60px 0 0 -60px;**/
    -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); } }

It is to your liking to add margins or not but I commented them following the user report @Renan

  • 1

    Rules of margin and positioning are not necessary.

  • 1

    @Renan, edited.

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.