Trig функции в CSS-преобразовании?

Question

Я пытаюсь поместить несколько кругов вокруг большего круга под определенными углами, используя функции 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

Спасибо!

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>