$max: 48;
.team__list-orbit {
position: relative;
--size: 10em;
--item: 1.5em;
--count: 1;
--start: -90deg;
--sweep: 360deg;
--radius: calc(var(--size) / 2 - var(--item) / 2);
width: var(--size);
height: var(--size);
}
.team__item-orbit {
position: absolute;
top: 50%;
left: 50%;
width: var(--item);
height: var(--item);
margin: calc(-0.5 * var(--item));
border-radius: 50%;
overflow: hidden;
transform-origin: 0 0;
transform:
rotate(calc(var(--start) + var(--i) * var(--sweep) / var(--count)))
translate(var(--radius))
rotate(calc(-1 * (var(--start) + var(--i) * var(--sweep) / var(--count))));
}
@for $i from 1 through $max {
.team__item-orbit:nth-child(#{$i}) { --i: #{$i - 1}; }
}
提出する
Thank you!
Oops! Something went wrong while submitting the form.
we deliver valuable insights, company news, and expert perspectives to keep you informed and inspired.