css 变换中的三角函数？

Question

我正在尝试使用变换：平移以及 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

谢谢你！

Answer 1

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

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