CODEWITHSUNDEEP
csssass
spencerbug
spencerbug

Reputation: 33

Trig functions in css transform?

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.

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

See this snippet:

https://codepen.io/spencerbug/pen/PvwaWQ

Thank you!

Upvotes: 3

Views: 3341

Answers (2)

CSSBurner
CSSBurner

Reputation: 1991

Beginning with Firefox 108 and Safari 15.4 (and experimentally in Chrome 111 and Edge 111), the trigonometric cos() and sin() CSS functions are now supported (at < 18% browser coverage for either function, pls see this reference for example).

For the full list of trigonometric functions, please see the W3C documentation.

Upvotes: 2

vals
vals

Reputation: 64164

You can get the same result with a little trick. Just rotate the angle that you want, translate it by the radius length, and counter rotate by the same angle. This way, the result is the same, and you don't need trig functions.

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

Upvotes: 5

Related Questions