Skip to main content
adicionou 130 caracteres ao conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Crie uma classe com animation vinculada ao @keyframes que irá girar o elemento 360 graus. Ao ser clicado, adicione a classe ao elemento para ativar o efeito:

var wraps = document.querySelectorAll(".wrapper");
for(var x=0; x<wraps.length; x++){
   wraps[x].onclick = function(){
      this.classList.add("ativo");
   }
}
.wrapper{
   width: 200px;50px;
   height: 200px;50px;
   background-image: url(https://image.freepik.com/free-icon/gear_318-56262.jpg);
   background-size: cover;
   float: left;
}

.wrapper img{
   width: 200px;100%;
   height: 200px;100%;
}

.wrapper.ativo{
  animation: spin 1s infinite linear; /*velocidade de 1 segundo. Quanto maior, mais lento*/
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
Clique nanas imagemimagens:
<br>
<div class="wrapper"></div>
<div class="wrapper"></div>
<div class="wrapper"></div>
<div class="wrapper"></div>

Crie uma classe com animation vinculada ao @keyframes que irá girar o elemento 360 graus. Ao ser clicado, adicione a classe ao elemento para ativar o efeito:

var wraps = document.querySelectorAll(".wrapper");
for(var x=0; x<wraps.length; x++){
   wraps[x].onclick = function(){
      this.classList.add("ativo");
   }
}
.wrapper{
   width: 200px;
   height: 200px;
   background-image: url(https://image.freepik.com/free-icon/gear_318-56262.jpg);
   background-size: cover;
}

.wrapper{
   width: 200px;
   height: 200px;
}

.wrapper.ativo{
  animation: spin 1s infinite linear; /*velocidade de 1 segundo. Quanto maior, mais lento*/
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
Clique na imagem:
<div class="wrapper"></div>

Crie uma classe com animation vinculada ao @keyframes que irá girar o elemento 360 graus. Ao ser clicado, adicione a classe ao elemento para ativar o efeito:

var wraps = document.querySelectorAll(".wrapper");
for(var x=0; x<wraps.length; x++){
   wraps[x].onclick = function(){
      this.classList.add("ativo");
   }
}
.wrapper{
   width: 50px;
   height: 50px;
   background-image: url(https://image.freepik.com/free-icon/gear_318-56262.jpg);
   background-size: cover;
   float: left;
}

.wrapper img{
   width: 100%;
   height: 100%;
}

.wrapper.ativo{
  animation: spin 1s infinite linear; /*velocidade de 1 segundo. Quanto maior, mais lento*/
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
Clique nas imagens:
<br>
<div class="wrapper"></div>
<div class="wrapper"></div>
<div class="wrapper"></div>
<div class="wrapper"></div>

Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Crie uma classe com animation vinculada ao @keyframes que irá girar o elemento 360 graus. Ao ser clicado, adicione a classe ao elemento para ativar o efeito:

var wraps = document.querySelectorAll(".wrapper");
for(var x=0; x<wraps.length; x++){
   wraps[x].onclick = function(){
      this.classList.add("ativo");
   }
}
.wrapper{
   width: 200px;
   height: 200px;
   background-image: url(https://image.freepik.com/free-icon/gear_318-56262.jpg);
   background-size: cover;
}

.wrapper{
   width: 200px;
   height: 200px;
}

.wrapper.ativo{
  animation: spin 1s infinite linear; /*velocidade de 1 segundo. Quanto maior, mais lento*/
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
Clique na imagem:
<div class="wrapper"></div>