Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
@for $i from 1 through 8 {
.main .line:nth-child(#{$i}){
transform: rotate3d(0, 0, 1, 22.5deg * $i);
}
}
$border: 10px;
$r: 210px - $border;
$pi: 3.141592653589793;
@for $i from 1 through 4 {
.main .line:nth-child(#{$i}):before{
top: $r - (cos((4 - $i )*$pi/8)*$r);
}
}
@for $i from 5 through 8 {
.main .line:nth-child(#{$i}):before{
top: $r - (cos((4 - $i )*$pi/8)*$r);
}
}
.main .line:nth-child(1) {
transform: rotate3d(0, 0, 1, 22.5deg);
}
.main .line:nth-child(2) {
transform: rotate3d(0, 0, 1, 45deg);
}
.main .line:nth-child(3) {
transform: rotate3d(0, 0, 1, 67.5deg);
}
.main .line:nth-child(4) {
transform: rotate3d(0, 0, 1, 90deg);
}
.main .line:nth-child(5) {
transform: rotate3d(0, 0, 1, 112.5deg);
}
.main .line:nth-child(6) {
transform: rotate3d(0, 0, 1, 135deg);
}
.main .line:nth-child(7) {
transform: rotate3d(0, 0, 1, 157.5deg);
}
.main .line:nth-child(8) {
transform: rotate3d(0, 0, 1, 180deg);
}
.main .line:nth-child(1):before {
top: 123.46331px;
}
.main .line:nth-child(2):before {
top: 58.57864px;
}
.main .line:nth-child(3):before {
top: 15.22409px;
}
.main .line:nth-child(4):before {
top: 0px;
}
.main .line:nth-child(5):before {
top: 15.22409px;
}
.main .line:nth-child(6):before {
top: 58.57864px;
}
.main .line:nth-child(7):before {
top: 123.46331px;
}
.main .line:nth-child(8):before {
top: 200px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.