Search Community

# How to rotate parent circle's child circles so that their 90 degree is towards the center point of parent circle that is origin (0, 0) in js and math.

Moderator Tag

Go to solution Solved by mvaneijgen,

## Recommended Posts

I have one big circle and I have small circles around it as it children now I am facing an issue is their angle rotation I want to rotate the children's circles so that their 90 degrees are towards the center of their parent circle which is (0, 0). how to do that if given the x and y of each child circle.

I have provided the codepen please check it out its not that big but am poor in maths.

##### Share on other sites

Our own @Carl just did a great in-depth tutorial about transformOrigin check it out. I think it is exactly what you're looking for

• 3
##### Share on other sites

15 minutes ago, mvaneijgen said:

Our own @Carl just did a great in-depth tutorial about transformOrigin check it out. I think it is exactly what you're looking for

transform origin solved thanks, But can you please check out the main problem which is finding the angle on which to rotate the child so that its 90 deg is towards the center of the parent circle

##### Share on other sites

• Solution

That is just 45 deg right? Or the amount spaces you have? You have 8 spaces in your sketch 360 / 8 = 45. Then starting from 0 * 45 = 0, 1 * 45 = 45, ... 3 * 45 = 135, ect.

See the Pen zYMvzPj?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

• 4
##### Share on other sites

@mvaneijgen is exactly right. I cover this type of layout extensively in my GSAP courses.

This demo shows how you can put child elements in a parent, shift the position of the child, and rotate the parent to get the circular disctribution.

See the Pen 9e81098ef5a1de7a45d3b3a284242be1?editors=0010 by snorkltv (@snorkltv) on CodePen

Here a negative "counter-rotation" is applied to each child element so that all the children are upright

See the Pen KKrdXKY?editors=0010 by snorkltv (@snorkltv) on CodePen

And of course this is all necessary when building a ferris wheel

See the Pen RwKOrVb by snorkltv (@snorkltv) on CodePen

• 3
##### Share on other sites

4 hours ago, mvaneijgen said:

That is just 45 deg right? Or the amount spaces you have? You have 8 spaces in your sketch 360 / 8 = 45. Then starting from 0 * 45 = 0, 1 * 45 = 45, ... 3 * 45 = 135, ect.

Shukran Habibi❤️

##### Share on other sites

2 hours ago, Carl said:

@mvaneijgen is exactly right. I cover this type of layout extensively in my GSAP courses.

This demo shows how you can put child elements in a parent, shift the position of the child, and rotate the parent to get the circular disctribution.

Here a negative "counter-rotation" is applied to each child element so that all the children are upright

And of course this is all necessary when building a ferris wheel

Its really helpul Thanks for you precious answer❤️