Problem rotating an object continuously

Question

I created a circle to rotate 45 degrees every time I click the arrow, either right or left.

For this I am using CSS and jQuery. (FIDDLE NEXT)

I did the following function spin(direction) so that it encompassed any of the senses clicked on the arrow by the users, so much so that I came across the question of discovering the degrees of an element and knowing only in format matrix, format by which javascript returns and searching, I adapted a function to convert matrix -> graus. The code works perfectly!

The point is, when I click many times, either right or left, after a certain number of clicks, the circle screws into the rotation, and always hangs with the "come and go" movement, increasing and decreasing the degrees, and I’m not able to break this vicious cycle of the event. I have provided above the fiddle so that you can simulate what I am playing here!

Below follows my code:

$("#turn-spinner-right").click(function(){
  var sentido = 'right';
  spin(sentido);
});

$("#turn-spinner-left").click(function(){
  var sentido = 'left'; 
  spin(sentido);
});

function spin(direction){
    var transform = $(".spinner").css("transform");
    console.log('MATRIX: '+transform);
    var angle = convertMatrixToAngle(transform);
    console.log(angle);    

    switch(direction){
        case 'left':
            if($(".spinner").css( "transform" ) == 'none'){
                $(".spinner").css("transform","rotate(-45deg)");
            } else {
                var newAngle = angle-45;
                console.log('novo angulo:'+newAngle);
                $(".spinner").css("transform","rotate("+newAngle+"deg)");
            }
            break;
        case 'right':
            if($(".spinner").css( "transform" ) == 'none'){
                $(".spinner").css("transform","rotate(45deg)");
            } else {
                var newAngle = angle+45;
                console.log('novo angulo:'+newAngle);
                $(".spinner").css("transform","rotate("+newAngle+"deg)");
            }
            break;
    }
}

Answer 1

Analyzing your code identified that this function that converts to matrix for angle has limitations after given angle, so I suggest a simpler approach saving the angle elsewhere, as example below:

$("#turn-spinner-right").click(function(){
  var sentido = 'right';
  spin(sentido);
});

$("#turn-spinner-left").click(function(){
  var sentido = 'left'; 
  spin(sentido);
});

function spin(direction){

  // Recuperamos o valor atual do ângulo, caso não exista, começamos com '0'
  var angle = $(".spinner").data('angle') || 0;

  // Aqui incrementamos ou decrementamos conforme a direção
  if (direction == 'left') {
    angle -= 45;
  } else {
    angle += 45;
  }

  // Aqui aplicamos o css para rotacionar o elemento ao novo ângulo
  $(".spinner").css("transform","rotate("+angle+"deg)");

  // Aqui salvamos o novo angulo no elemento para ser recuperado no próximo clique
  $(".spinner").data('angle', angle);
}

.spinner {
  width: 200px;
  height: 200px;
  background-color: #e3e3e3;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  transition: 0.5s;
  border: 5px dashed black;
  border-radius: 100%
}

.arrows {
  color: #484848;
  font-size: 48pt;
}
.arrows i {
  margin: 5px 15px 0px 15px;
  cursor: pointer;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script><link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" /><script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



<div class="spinner"></div>
<div class="arrows text-center">
  <i class="fa fa-arrow-circle-o-left" id="turn-spinner-left"></i>
  <i class="fa fa-arrow-circle-o-right" id="turn-spinner-right"></i>
</div>