` ````
- var cubes = 121
.view
while cubes--
.cube
.axis
- var sides = 6
while sides--
.side
```

` ````
$time: 7s;
$cubes: 121;
$cube-size: 20px;
$margin: 15px;
$green: #27F9A6;
$red: #FF2B3E;
$blue: #2BACE1;
$yellow: #F8CB51;
$magenta: #FF33C4;
$black: #262021;
$lime: #63EF51;
$purple: #723DE0;
body {
background: $black;
}
.view {
position: absolute;
top: 50%;
left: 50%;
height: ($cube-size + $margin) * sqrt($cubes) + $margin * 2;
width: ($cube-size + $margin) * sqrt($cubes) + $margin * 2;
margin: (($cube-size + $margin) * sqrt($cubes) + $margin * 2) / -2;
background: $black;
perspective: 700px;
perspective-origin: 50% 0%;
display: flex;
flex-flow: row wrap;
* {
transform-style: preserve-3d;
}
}
.cube {
position: relative;
height: $cube-size;
width: $cube-size;
flex: 0 0 $cube-size;
margin: $margin / 2;
$parts: 11;
$els: pow($parts, 2);
$runs: 1;
$cx: floor(sqrt($els) / 2);
$cy: floor(sqrt($els) / 2);
$add: -10;
$delay: 0.4s;
$delayAdd: $time * -1;
@for $i from 1 through $els {
$x: $i % sqrt($els);
$y: $runs;
@if $i > 5 and $i % $parts == 0 {
$runs: $runs + 1;
}
&:nth-child(#{$x + $y * $parts + $add}) {
$x: $x;
$y: $y - 1;
.axis, .side {
animation-delay: sqrt(abs(($cx - $x) * ($cx - $x) + ($cy - $y) * ($cy - $y))) * $delay + $delayAdd - $x*$y/$i;
}
}
}
}
.side {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
&:nth-child(1) {
transform: rotateX(-90deg) translateZ($cube-size / 2);
background: $black;
}
&:nth-child(2) {
transform: rotateX(90deg) translateZ($cube-size / 2);
background: $black;
}
&:nth-child(3) {
transform: rotateY(90deg) translateZ($cube-size / 2);
animation: magenta-blue $time linear infinite;
}
&:nth-child(4) {
transform: rotateY(-90deg) translateZ($cube-size / 2);
background: $red;
animation: red-purple $time linear infinite;
}
&:nth-child(5) {
transform: rotateY(-180deg) translateZ($cube-size / 2);
background: $lime;
animation: red-lime $time linear infinite;
}
&:nth-child(6) {
transform: rotateY(0) translateZ($cube-size / 2);
background: $green;
animation: green-yellow $time linear infinite;
}
}
@keyframes red-purple {
71%, 80% {
background: $red;
}
21%, 70% {
background: $purple;
}
0%, 20%, 81%, 100% {
background: $green;
}
}
@keyframes red-lime {
0%, 50% {
background: $lime;
}
50.1%, 100% {
background: $red;
}
}
@keyframes green-yellow {
0%, 25%, 75.1%, 100% {
background: $green;
}
25.1%, 75% {
background: $yellow;
}
}
@keyframes magenta-blue {
90.1%, 100%, 0%, 30% {
background: $magenta;
}
30.1%, 90% {
background: $blue;
}
}
@keyframes rotate {
@for $i from 0 through 7 {
#{100 / 7 * $i}% {
transform: rotate3d(0, 0, 1, 360deg / 7 * $i) rotate3d(0, -1, 0, 90deg * $i);
}
}
}
.axis {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: rotate3d(1, 1, 0, -45deg);
animation: rotate $time linear infinite;
}
```

999px

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

Alt F
Opt F
Find & Replace

Also see: Tab Triggers