javascript - How to rotate div in circular motion while counter rotating inner circles? -
I'm trying to get this image. Circles on the edges are clickable, its structure is such that each rotation will be equal to 45 degrees Celsius. I will rotate the property for CSS Transaction Rotation.
How should this work?
- When we click on any circle on the edge it should come into its active state and it should always be rotated in clockwise direction.
What I have done here
I received rotation assigning numbers to the boards
that is, if 7 is clicked on the number then it rotates by angle (9-7) * 45 = 90
. (This time I have not changed the numbers dynamically, that is, the Circle circles are moving around.)
It works fine here. But, look at this scenario: When we click on second place, it rotates by 315 degrees and then if you click again on the same (second) position, it will make an angle of 270 and it will be clockwise in the wall Rotate direction I think this is his behavior but, I do not want to be like that. It should be rotated in the clockwise direction and take the active position.
Now I did this to get the above:
Add an angle with the previous angle.
var prev_degree = prev_degree + current_degree;
(The current degree is being calculated using the same formula from above.)
This time I have changed the number dynamically, i.e. The number is given on the desired posts. From 1 to active position 8 is shown as an image I
But at this time, when I rotate circle 1, it rotates right 2 times, then it starts doing odd work if If you click on a number continuously, it will add the same angle and rotate right, even if you have an angle. If you click on the random circle, then it does not work which is completely wrong.
Why clockwise?
Because the circles on the edges, in which they are icons, I have to maintain the position on the whole cycle. (I can get the rotating circles on the edges by declaring negative angles. But, now it is not a problem.)
I am getting there when there is no issue negative angle
Let me know if you are not clear from my question.
Please tell me your suggestions for doing this :-)
Comments
Post a Comment