Vue-FAQ

CSS продолжает развиваться в сторону языка программирования

Начиная с Chrome 140 и Safari 18.2 стала возможна арифметика с разными единицами размерности

Источник

.container {
  position: relative;
  
  i {
    --angle: calc(sibling-index() * 10deg);
    --distance: calc(var(--angle) / 360deg * 180px);
    
    position: absolute;
    inset: -0.5em;
    background-color: #fff;
    border-radius: 50%;
    transform: rotate(var(--angle)) translateX(var(--distance));
  }
}

<div class="container">
  <i></i>
...
  <i></i>
</div>

#css

🔥8👎7🥱1

www.tgoop.com/vuefaq/1538

798 viewsOct 4 at 14:14

CSS продолжает развиваться в сторону языка программирования

Начиная с Chrome 140 и Safari 18.2 стала возможна арифметика с разными единицами размерности

Источник

.container {
  position: relative;
  
  i {
    --angle: calc(sibling-index() * 10deg);
    --distance: calc(var(--angle) / 360deg * 180px);
    
    position: absolute;
    inset: -0.5em;
    background-color: #fff;
    border-radius: 50%;
    transform: rotate(var(--angle)) translateX(var(--distance));
  }
}

<div class="container">
  <i></i>
...
  <i></i>
</div>

BY Vue-FAQ