问题
I have a container element with 3 children, all with border-radius set to make them circles. Approx:
<div id="rotator">
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
</div>
#rotator { position: relative }
#rotator div { position: absolute; border-radius: 50%; }
#rotator div#a { top: -20%; left: 30%; }
#rotator div#b { bottom: 3%; left: -12%; }
#rotator div#c { bottom: 3%; left: 12%; }
The problem I'm facing is that I need to position each of the child elements mathematically perfectly so that if the entire block was rotated by 120 degrees (one third), item A would then occupy exactly the same area as item B. See image attached for a mockup, see JSFiddle:
https://jsfiddle.net/tobyl/roLp6kj4/3/
The reason is that I will be animating these elements, and I have positioned them roughly but I believe it should be possible to position them mathematically perfectly.
来源：https://stackoverflow.com/questions/63676156/calculate-position-of-3-absolutely-positioned-elements