我正在尝试使用transform:translate,cos和sin函数,以特定的角度在较大的圆周围放置一些圆。似乎不起作用,我不确定为什么。
.ctr_btn {
background-color: red;
color: white;
display: block;
display: relative;
border-radius: 50%;
width: 4rem;
height: 4rem;
}
.out_btn {
background-color: yellowgreen;
width: 3rem;
height: 3rem;
border-radius: 50%;
color: black;
position: absolute;
//this is the part I'm concerned about.
transform: translateX(calc(2rem * cos(var(--angle)))) translateY(calc(2rem * sin(var(--angle))));
}
<div class="Nav">
<div class="ctr_btn">
maincircle
<div class="out_btn" style="--angle:15deg">1</div>
<div class="out_btn" style="--angle:30deg">2</div>
<div class="out_btn" style="--angle:45deg">3</div>
<div class="out_btn" style="--angle:60deg">4</div>
<div class="out_btn" style="--angle:75deg">5</div>
</div>
</div>
请参见以下代码段:
https://codepen.io/spencerbug/pen/PvwaWQ
谢谢!
答案 0 :(得分:1)
您可以通过一些技巧获得相同的结果。只需旋转所需的角度,将其平移为半径长度,然后反向旋转相同的角度即可。这样,结果是相同的,并且您不需要trig函数。
.ctr_btn {
background-color: red;
color: white;
display: block;
display: relative;
border-radius: 50%;
width: 4rem;
height: 4rem;
margin: 100px;
}
.out_btn {
background-color: yellowgreen;
width: 1rem;
height: 1rem;
padding: 1rem;
border-radius: 50%;
color: black;
position: absolute;
transform: rotate(var(--angle)) translate(10em) rotate(calc(-1 * var(--angle)));
}
<div class="Nav">
<div class="ctr_btn">
maincircle
<div class="out_btn" style="--angle:15deg">1</div>
<div class="out_btn" style="--angle:30deg">2</div>
<div class="out_btn" style="--angle:45deg">3</div>
<div class="out_btn" style="--angle:60deg">4</div>
<div class="out_btn" style="--angle:75deg">5</div>
</div>
</div>