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>