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);
}
}
$width: 190px;
@for $i from 1 through 8 {
.main .line:nth-child(#{$i}):before{
top: $width - 25px * ($i - 1);
}
}
.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: 190px;
}
.main .line:nth-child(2):before {
top: 165px;
}
.main .line:nth-child(3):before {
top: 140px;
}
.main .line:nth-child(4):before {
top: 115px;
}
.main .line:nth-child(5):before {
top: 90px;
}
.main .line:nth-child(6):before {
top: 65px;
}
.main .line:nth-child(7):before {
top: 40px;
}
.main .line:nth-child(8):before {
top: 15px;
}
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.