Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
.scene
-(2..4).each do |i|
- if i != 4
.assembly.nope
- else
.assembly
.strip
-(1..2).each do
.roller
-(1..i).each do
.side
/* By @passcod
Adapted from http://codepen.io/thebabydino/pen/pzgiE
I think it would be nice as a spinner / loading animation somewhere. Also try commenting out the .assembly.nope line for an alternative form. */
@import "compass";
$w: 3em;
$h: 4em;
$c: #f5f5f5;
$d: #00acd2;
$e: #ff5954;
html, body { height: 100%; }
.nope { display: none; }
body {
overflow: hidden;
margin: 0;
perspective: 80em;
perspective-origin: 50% 00%;
background: $c;
color: $c;
}
.scene {
&, * {
box-sizing: border-box;
position: absolute;
top: 0;
left: 50%;
transform-style: preserve-3d;
}
transform: translate(-15em, 15em) rotateX(75deg) rotate(22.5deg)
}
.assembly {
@for $i from 1 to 15 {
$ca: 360deg/($i + 1);
$ri: ($w/2)/(if($i != 1, tan($ca/2), 2));
$rc: ($w/2)/(if($i != 1, sin($ca/2), 1));
&:nth-child(#{$i}) {
z-index: -$i;
transform: translate(0, -1.25*$i*$h);
animation: slide#{$i} 1s ease-in-out infinite;
@at-root {
@keyframes slide#{$i} {
to { transform: translate($w, -1.25*$i*$h); }
}
}
.roller {
transform: rotateY($ca/2)
translateZ($rc) rotateY(-$ca*(1 + .5*($i%2)));
animation: inherit;
animation-name: roll#{$i}a;
&:last-child {
z-index: -1;
margin: 0 4*$w;
transform: rotateY(-$ca/2)
translateZ(-$rc) rotateY(-$ca/2);
animation-name: roll#{$i}b;
}
@at-root {
@keyframes roll#{$i}a {
to {
transform: rotateY(-$ca/2)
translateZ($rc)
rotateY(-$ca*(1 + .5*($i%2)));
}
}
}
@at-root {
@keyframes roll#{$i}b {
to {
transform: rotateY($ca/2)
translateZ(-$rc)
rotateY(-$ca/2);
}
}
}
}
.side {
margin: -$h/2 (-$w/2);
width: $w; height: $h;
@for $j from 0 to $i + 1 {
&:nth-child(#{$j + 1}) {
transform: rotateY($j*$ca)
if($i != 1, translateZ($ri), ());
@if $i > 2 {
&:before {
height: $ri;
@if $i == 3 {
left: .125em;
width: calc(#{$w} - .125em);
}
}
}
}
}
}
}
}
}
.strip {
margin: -$h/2 -1px;
width: 4*$w; height: $h;
border: solid .125em $c;
background:
linear-gradient(90deg, $c .125em, transparent 0) $d;
background-size: $w 100%;
}
.side {
&:before, &:after {
box-sizing: border-box;
position: absolute;
left: 0;
width: inherit;
backface-visibility: hidden;
content: '';
}
&:before {
top: 100%;
height: .125em;
transform-origin: 50% 0;
transform: rotateX(-90deg);
border-top: solid .125em $c;
background: $e;
}
&:after {
height: inherit;
border: solid .125em $c;
background: $d;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment