` ````
.assembly
- 27.times do
.cube
- 6.times do
.cube__face
```

` ````
$n-per-dim: 3;
$n-dims: 3;
$n: pow($n-per-dim, $n-dims);
$n-faces: 6;
$c: #191919 #4ab1ff #80e346;
$edge: 2em;
$t: 5s;
body {
overflow: hidden;
margin: 0;
height: 100vh;
perspective: 40em;
perspective-origin: 50% calc(50% - #{pow($n-per-dim, $n-dims - 1)*$edge});
background: nth($c, 1);
* {
position: absolute;
top: 50%; left: 50%;
transform-style: preserve-3d;
}
}
.assembly {
transform: rotateY(-45deg);
animation: ani $t linear infinite;
}
@keyframes ani {
0% {
transform: rotateY(-45deg)
scale3d($n-per-dim, $n-per-dim, $n-per-dim);
}
100% {
transform: rotateY(315deg) scale3d(1, 1,1);
}
}
.cube {
@for $i from 0 to $n-per-dim {
$y: ($i - ($n-per-dim - 1)*.5)*-$edge;
$y1: (40 + random(40))*$y*.1;
@for $j from 0 to $n-per-dim {
$z: ($j - ($n-per-dim - 1)*.5)*$edge;
$z1: (40 + random(40))*$z*.1;
@for $k from 0 to $n-per-dim {
$x: ($k - ($n-per-dim - 1)*.5)*$edge;
$x1: (40 + random(40))*$x*.1;
$idx: $i*pow($n-per-dim, 2) +
$j*$n-per-dim + $k + 1;
@if abs($x) + abs($y) + abs($z) > .01em {
&:nth-child(#{$idx}) {
transform: translate3d($x, $y, $z)
// Firefox scaling fix :(
scale3d(.999, .999, .999);
-webkit-transform: translate3d($x, $y, $z);
animation: ani-#{$idx} $t cubic-bezier(.165, .84, .44, 1) infinite;
}
@at-root {
@keyframes ani-#{$idx} {
0%, #{$idx*80%/$n - 1%} {
opacity: 0;
}
#{$idx*80%/$n}, 100% {
opacity: 1;
}
0%, #{$idx*80%/$n} {
transform: translate3d($x1, $y1, $z1) rotate3d(random(10), random(10), random(10), random(360)*1deg)
// Firefox scaling fix :(
scale3d(.999, .999, .999);
-webkit-transform: translate3d($x1, $y1, $z1) rotate3d(random(360)*1deg, random(10), random(10), random(10));
}
#{$idx*80%/$n + 20%}, 100% {
transform: translate3d($x, $y, $z)
// Firefox scaling fix :(
scale3d(.999, .999, .999);
-webkit-transform: translate3d($x, $y, $z);
}
}
}
}
}
}
}
&__face {
margin: -.5*$edge;
width: $edge; height: $edge;
backface-visibility: hidden;
@for $i from 0 to $n-faces {
&:nth-child(#{$i + 1}) {
transform:
if($i < 4,
rotateY($i*90deg),
rotateX(pow(-1, $i)*90deg))
translateZ(.5*$edge);
background: if($i < 4, nth($c, $i%2 + 1),
nth($c, 3));
}
}
}
}
```

999px

Loading
..................

Alt F
Opt F
Find & Replace

Also see: Tab Triggers