4

preciso fazer uma imagem girar infinitamente somente com HTML e CSS e possível se sim como que pode ser feito.

1 Resposta 1

6

Uma pergunta semelhante no SOen ia de encontro com sua duvida:

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); } }

Fica a seu gosto adicionar margens ou não mas as comentei seguindo o informe do usuário @renan

2
  • 1
    As regras de margem e posicionamento não são necessárias. Commented 20/05/2015 às 16:57
  • 1
    @renan, editado.
    – Ricardo
    Commented 20/05/2015 às 17:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .