` ````
.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

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

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

Alt
Opt
Find & Replace

Also see: Tab Triggers