title: How to rotate div in circular motion while counter rotating inner circles?
body: <p>This image is what I am trying to achieve. Circles on the edges are clickable. Its structure is made such that each rotation will be multiple of 45 deg.
  I am using css transform rotate property for rotation.</p>
  
  <p><strong>How is it supposed to work?</strong></p>
  
  <ul>
  <li>When we click on any circle on the edge it should come to its active position and it should always rotate in clockwise direction.</li>
  </ul>
  
  <p><strong>Here is what I did</strong></p>
  
  <p>I achieved rotation by assigning numbers to the circles. </p>
  
  <p>i.e., if clicked on 7 number then it will rotate by angle <code>(9-7)*45=90</code> degrees.
  (This time I did not change the numbers dynamically. i.e., as the circle is rotating the numbers given to the circles are the same.)</p>
  
  <p>This works fine here. But, lets see this scenario: when we click on 2nd position circle it will rotate by 315 deg and then if you click again on the same (second) position then it will make the angle of 270 and it rotates the div in anti-clockwise direction. I think this is its behavior. But, I don't want this to happen. It should rotate again in clockwise direction and should take the active position.</p>
  
  <p><strong>Now to achieve above I did this:</strong></p>
  
  <p>Adding angle with prev angle.</p>
  
  <p><code>var prev_degree = prev_degree + current_degree;</code></p>
  
  <p>(current degree is being calculated using the same formula from above.)</p>
  
  <p>This time I changed numbers dynamically i.e., on each click numbers are given to the desired positions. Starting 1 as from Active position till 8 as shown in Image</p>
  
  <p>But this time, when I rotate circle 1, 2 times it rotates perfect then it starts working strange. If you are constantly clicking on the same number then it will add the same angle and will keep rotating perfect no matter what your angle is. If you click on random circles then it wont work which is totally wrong.</p>
  
  <p><strong>Why clockwise?</strong> </p>
  
  <p>Because the circles on edges, they contain icon of which I have to maintain position when whole circle rotates.(I can achieve that rotating circles on the edges by assigning negative angles. But, now this is not a problem.) </p>
  
  <p>There is no case when I am getting negative angle.</p>
  
  <p>Let me know if you are not clear with my question.</p>
  
  <p>Please let me know your suggestions to make this work :-) </p>
  
  <p><img src="https://i.stack.imgur.com/TjRom.png" alt="enter image description here"></p>