Skip to content

Instantly share code, notes, and snippets.

@DigitalKrony
Last active November 27, 2018 15:29
Show Gist options
  • Save DigitalKrony/081e6364be6ef813f153db12b422defc to your computer and use it in GitHub Desktop.
Save DigitalKrony/081e6364be6ef813f153db12b422defc to your computer and use it in GitHub Desktop.
A SCSS mixin that places objects on a circle with correct rotation (or not)
@mixin on-circle($item-count: 6, $circle-size: 240px, $item-size: 32px, $rotation-adjust: true) {
position: relative;
width: $circle-size;
min-width: $circle-size;
height: $circle-size;
padding: 0;
border-radius: 50%;
list-style: none;
transform-origin: $circle-size/2 $circle-size/2;
> * {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: $item-size;
height: $item-size;
margin: -($item-size / 2);
$angle: (360 / $item-count);
$rot: 0;
@for $i from 1 through $item-count {
&:nth-of-type(#{$i}) {
$objRot: $rot * -1deg;
@if $rotation-adjust == false {$objRot: 0}
transform:
rotate($rot * 1deg)
translate($circle-size / 2)
rotate($objRot);
}
$rot: $rot + $angle;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment