title: Trig functions in css transform?
body: <p>I'm trying to put some circles around a larger circle at specific angles using transform: translate and cos and sin functions. It doesn't seem to work, and I'm not sure why.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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))));
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="Nav"&gt;
      &lt;div class="ctr_btn"&gt;
        maincircle
        &lt;div class="out_btn" style="--angle:15deg"&gt;1&lt;/div&gt;
        &lt;div class="out_btn" style="--angle:30deg"&gt;2&lt;/div&gt;
        &lt;div class="out_btn" style="--angle:45deg"&gt;3&lt;/div&gt;
        &lt;div class="out_btn" style="--angle:60deg"&gt;4&lt;/div&gt;
        &lt;div class="out_btn" style="--angle:75deg"&gt;5&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>See this snippet: </p>
  
  <p><a href="https://codepen.io/spencerbug/pen/PvwaWQ" rel="nofollow noreferrer">https://codepen.io/spencerbug/pen/PvwaWQ</a></p>
  
  <p>Thank you!</p>