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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    var wraps = document.querySelectorAll(".wrapper");
    for(var x=0; x<wraps.length; x++){
       wraps[x].onclick = function(){
          this.classList.add("ativo");
       }
    }

<!-- language: lang-css -->

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

<!-- language: lang-html -->

    Clique nas imagens:
    <br>
    <div class="wrapper"></div>
    <div class="wrapper"></div>
    <div class="wrapper"></div>
    <div class="wrapper"></div>

<!-- end snippet -->