在CSS转换中触发函数?

时间:2019-05-07 00:27:37

标签: css css3 sass

我正在尝试使用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

谢谢!

1 个答案:

答案 0 :(得分:1)

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

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