如何解决计算3个绝对定位元素的位置
我有一个包含3个子元素的容器元素,所有子元素都设置了border-radius
以使其成为圆圈。大约:
<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%; }
我面临的问题是,我需要在数学上完美地定位每个子元素,以便如果将整个块旋转120度(三分之一),则项目A将占据与项目B完全相同的区域。请参见附件中的图像以获取模型,请参见JSFiddle:
https://jsfiddle.net/tobyl/roLp6kj4/3/
原因是我将对这些元素进行动画处理,并且将它们粗略地定位,但是我认为应该可以在数学上完美地定位它们。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。