Animação de rotação CSS3

244
<img class="image" src="" alt="" width="120" height="120">

Não é possível fazer com que esta imagem animada funcione, ela deve fazer uma rotação de 360 ​​graus.

Eu acho que algo está errado com o CSS abaixo, pois ele fica parado.

.image {
    float: left;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    @-ms-keyframes spin { 
        from { 
            -ms-transform: rotate(0deg); 
        } to { 
            -ms-transform: rotate(360deg); 
        }
    }
    @-moz-keyframes spin { 
        from { 
            -moz-transform: rotate(0deg); 
        } to { 
            -moz-transform: rotate(360deg); 
        }
    }
    @-webkit-keyframes spin { 
        from { 
            -webkit-transform: rotate(0deg); 
        } to { 
            -webkit-transform: rotate(360deg); 
        }
    }
    @keyframes spin { 
        from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(360deg); 
        }
    }
}
Borsn
fonte

Respostas:

520

Aqui está uma demonstração . A animação correta 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); } }
<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">


Algumas notas no seu código:

  1. Você aninhou os quadros-chave dentro da .imageregra e isso está incorreto
  2. float:left não funcionará em elementos absolutamente posicionados
  3. Dê uma olhada no caniuse : o IE10 não precisa do -ms-prefixo
Giona
fonte
13
Se alguém tentar isso em seu próprio código: NÃO ESQUEÇA A seção @ na parte inferior
Jack M.
Olá Posso parar a animação Rotação infinita após 5s?
MD Ashik
16
Quase cuspi minha água quando executei a animação.
Razgriz 12/02
" float:left won't work on absolutely positioned elements", Ele irá reduzi-los ao tamanho mínimo, porém, semelhante ao que display: inline-block faz
gregn3
32

Eu tenho uma imagem rotativa usando a mesma coisa que você:

.knoop1 img{
    position:absolute;
    width:114px;
    height:114px;
    top:400px;
    margin:0 auto;
    margin-left:-195px;
    z-index:0;

    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;

     overflow:hidden;
}

.knoop1:hover img{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);
}
Ryan de Vries
fonte
1
add: transform:rotate(360deg);for IE
Dusty
3
Escolha exemplos locais em vez de links quebrados de sites.
Evoluçãoxbox
O link está quebrado agora.
Markus Bucher
30

Para alcançar a rotação de 360 ​​graus, aqui está a solução de trabalho .

O HTML:

<img class="image" src="your-image.png">

O CSS:

.image {
    overflow: hidden;
    transition-duration: 0.8s;
    transition-property: transform;
}
.image:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

Você precisa pairar na imagem e obterá o efeito de rotação de 360 ​​graus.

PS: Adicione uma -webkit-extensão para que ele funcione no Chrome e em outros navegadores da Webkit. Você pode verificar o violino atualizado para o webkit AQUI

Nitesh
fonte
O Fiddle não funciona. O inspetor do Chrome não gosta do seu CSS, especificamente a "transformação" e a "propriedade de transição". Oh céus.
Apenas Plain High
1
Para isso, você precisa adicionar um -webkit-tranformpara que ele funcione. Aqui está o violino atualizado. jsfiddle.net/sELBM/172 - @JustPlainHigh
Nitesh
1
2017: isso agora é muito bem suportado e é uma maneira preferida de fazer rotações não infinitas. -webkit-O prefixo não é mais necessário e pode ser removido com segurança. Suporte do navegador: caniuse.com/#search=transforms
Alph.Dev 13/17
2

se você quiser inverter a imagem, pode usá-la.

.image{
    width: 100%;
    -webkit-animation:spin 3s linear infinite;
    -moz-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite;
}
@-moz-keyframes spin { 50% { -moz-transform: rotateY(90deg); } }
@-webkit-keyframes spin { 50% { -webkit-transform: rotateY(90deg); } }
@keyframes spin { 50% { -webkit-transform: rotateY(90deg); transform:rotateY(90deg); } }
Heo Ht Hades
fonte
0

.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); } }
<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">

Charles Mbogo
fonte
0

tente fácil

 
 .btn-circle span {
     top: 0;
   
      position: absolute;
     font-size: 18px;
       text-align: center;
    text-decoration: none;
      -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

.btn-circle span :hover {
 color :silver;
}


/* rotate 360 key for refresh btn */
@-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); } } 
 <button type="button" class="btn btn-success btn-circle" ><span class="glyphicon">&#x21bb;</span></button>

Omar bakhsh
fonte
-6

Aqui isso deve ajudá-lo

O link jsfiddle abaixo ajudará você a entender como girar uma imagem. Usei o mesmo para girar o mostrador de um relógio.

http://jsfiddle.net/xw89p/

var rotation = function (){
   $("#image").rotate({
      angle:0, 
      animateTo:360, 
      callback: rotation,
      easing: function (x,t,b,c,d){       
          return c*(t/d)+b;
      }
   });
}
rotation();

Onde: • t: hora atual,

• b: valor inicial,

• c: mudança de valor,

• d: duração,

• x: não utilizado

Sem flexibilização (flexibilização linear): function (x, t, b, c, d) {return b + (t / d) * c; }

Abhi
fonte
2
Eu recomendaria esta resposta se você fornecer um pouco mais de informações (como você faz no violino). Eu também acho que você deve mencionar que este é um plugin do jQuery porque eu pensava: "Eu não sabia que o jQuery poderia fazer isso !!! ^ _ ^ olha para violino Oh, espere ... U_U"
Just Plain High
2
uma explicação das variáveis ​​x, t, b, c, d (como você faz no violino) e afirmando claramente que, embora não seja uma solução CSS conforme solicitado pelo OP, é uma solução bastante simples e eficaz do plugin jQuery: )
Apenas Plain High
3
Votado. O OP não solicitou uma solução Javascript, especialmente um plug-in jQuery. Atenha-se ao que está sendo solicitado.
TheCarver 15/03/2015