css - css 转换中的三 Angular 函数？

Question

我正在尝试使用 transform: translate 以及 cos 和 sin 函数以特定 Angular 围绕一个更大的圆圈放置一些圆圈。它似乎不起作用，我不确定为什么。

.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

谢谢!

Answer 1

您可以通过一些小技巧获得相同的结果。只需旋转您想要的 Angular ，将其平移半径长度，然后反向旋转相同的 Angular 。这样，结果是一样的，而且你不需要三 Angular 函数。

.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>