Lego2012
9/26/2016 - 10:02 PM
Numbers Cube Counter
Numbers Cube Counter
.box
.axis
- var layers = 3
while layers--
.layer
- var cubes = 15
while cubes--
.cube
- var sides = 6
while sides--
.side
numbers cube counter
Inspired by:
Seems to flicker from time to time but gets really smooth runs too o_O
open in full-mode for better performance (flickerfree)
Forked from Gregor Adams's Pen numbers cube counter.
A Pen by Leo Merkel on CodePen.
$color: #ccc;
$time: 10s;
$_9-2: (0 0 0
0 _ 0
0 0 0
_ _ 0
0 0 0);
$_9-1: (0 0 0
_ _ _
0 0 0
_ _ _
0 0 0);
$_9-0: (0 0 0
0 _ 0
0 0 0
_ _ 0
0 0 0);
$_8-2: (0 0 0
0 _ 0
0 0 0
0 _ 0
0 0 0);
$_8-1: (0 _ _
_ _ _
_ _ _
_ _ _
_ _ _);
$_8-0: (0 _ _
_ _ _
_ _ _
_ _ _
_ _ _);
$_7-2: (0 0 0
_ _ _
_ _ 0
_ _ 0
_ _ 0);
$_7-1: (0 _ _
_ _ _
_ _ 0
_ _ _
_ _ 0);
$_7-0: (0 0 0
_ _ 0
_ _ 0
_ _ 0
_ _ 0);
$_6-2: (0 0 0
6 _ _
0 0 6
0 _ 0
0 0 6);
$_6-1: (0 _ _
_ _ _
_ _ 0
_ _ _
_ _ 0);
$_6-0: (0 0 0
0 _ _
_ _ 0
_ _ _
_ _ 0);
$_5-2: (5 0 0
0 _ _
_ 0 0
_ _ 0
0 0 0);
$_5-1: (_ _ _
_ _ _
_ _ 0
_ _ _
_ _ _);
$_5-0: (0 _ _
0 _ _
0 _ _
_ _ _
_ _ _);
$_4-2: (0 _ 0
0 _ 0
0 0 0
_ _ 0
_ _ 0);
$_4-1: (_ _ 0
_ _ _
_ _ 0
_ _ _
_ _ 0);
$_4-0: (0 _ _
_ _ _
0 _ _
_ _ _
_ _ 0);
$_3-2: (0 0 0
_ _ 0
0 0 0
_ _ _
0 0 4);
$_3-1: (0 _ _
_ _ _
0 _ _
_ _ _
_ _ 0);
$_3-0: (0 _ _
_ _ _
0 _ _
_ _ 0
_ _ 0);
$_2-2: (_ _ _
_ _ _
_ _ _
_ _ _
0 0 _);
$_2-1: (0 0 0
_ _ 0
0 0 0
0 _ _
_ _ 0);
$_2-0: (0 _ _
_ _ _
_ _ _
_ _ _
0 _ _);
$_1-2: (0 0 _
_ 0 _
_ 0 _
_ 0 _
0 0 0);
$_1-1: (_ 0 _
_ _ _
_ _ _
_ _ _
_ 0 0);
$_1-0: (0 _ _
_ 0 _
_ 0 _
_ 0 _
0 _ _);
$_0-2: (0 0 0
0 _ 0
0 _ 0
0 _ 0
0 0 0);
$_0-1: (0 _ _
_ _ _
0 _ _
_ _ _
0 _ _);
$_0-0: (0 _ _
0 _ _
0 _ _
_ _ _
0 _ _);
@mixin set($map, $n) {
@if nth($map,$n) == 0 {
opacity: 1;
//visibility: visible;
} @else {
opacity: 0;
//visibility: hidden;
}
}
body {
background: #222;
}
.box {
height: 250px;
width: 150px;
position: absolute;
top: 50%;
left: 50%;
transform:
translate(-50%,-50%);
//perspective: 2000px;
//perspective-origin: 50% 50%;
* {
transform-style: preserve-3d;
backface-visibility: hidden;
}
}
.axis, .layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.axis {
animation: rotate $time/10 linear infinite;
animation-delay: $time/100;
}
.layer {
display: flex;
flex-flow: row wrap;
@for $i from -1 through 1 {
&:nth-child(#{$i + 2}) {
transform: translateZ(50px*$i);
}
}
}
.cube {
position: relative;
flex: 0 0 50px;
width: 50px;
height: 50px;
//opacity: 0;
//visibility: hidden;
backface-visibility: hidden;
@for $i from 1 through 15 {
&:nth-child(#{$i}) {
.layer:nth-child(1) & {
animation: change-#{$i}-1 $time linear infinite;
}
@keyframes change-#{$i}-1 {
1.0001%, 11% {
@include set($_9-0, $i);
}
11.0001%, 21% {
@include set($_8-0, $i);
}
21.0001%, 31% {
@include set($_7-0, $i);
}
31.0001%, 41% {
@include set($_6-0, $i);
}
41.0001%, 51% {
@include set($_5-0, $i);
}
51.0001%, 61% {
@include set($_4-0, $i);
}
61.0001%, 71% {
@include set($_3-0, $i);
}
71.0001%, 81% {
@include set($_2-0, $i);
}
81.0001%, 91% {
@include set($_1-0, $i);
}
91.0001%, 100%, 0%, 1% {
@include set($_0-0, $i);
}
}
.layer:nth-child(2) & {
animation: change-#{$i}-2 $time linear infinite;
}
@keyframes change-#{$i}-2 {
1.0001%, 11% {
@include set($_9-1, $i);
}
11.0001%, 21% {
@include set($_8-1, $i);
}
21.0001%, 31% {
@include set($_7-1, $i);
}
32%, 41% {
@include set($_6-1, $i);
}
41.0001%, 51% {
@include set($_5-1, $i);
}
51.0001%, 61% {
@include set($_4-1, $i);
}
61.0001%, 71% {
@include set($_3-1, $i);
}
71.0001%, 81% {
@include set($_2-1, $i);
}
81.0001%, 91% {
@include set($_1-1, $i);
}
91.0001%, 100%, 0%, 1% {
@include set($_0-1, $i);
}
}
.layer:nth-child(3) & {
animation: change-#{$i}-3 $time linear infinite;
}
@keyframes change-#{$i}-3 {
1.0001%, 11% {
@include set($_9-2, $i);
}
11.0001%, 21% {
@include set($_8-2, $i);
}
21.0001%, 31% {
@include set($_7-2, $i);
}
31.0001%, 41% {
@include set($_6-2, $i);
}
41.0001%, 51% {
@include set($_5-2, $i);
}
51.0001%, 61% {
@include set($_4-2, $i);
}
61.0001%, 71% {
@include set($_3-2, $i);
}
71.0001%, 81% {
@include set($_2-2, $i);
}
81.0001%, 91% {
@include set($_1-2, $i);
}
91.0001%, 100%, 0%, 1% {
@include set($_0-2, $i);
}
}
}
}
}
.side {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
&:nth-child(1) {
transform: rotateX(-90deg) translateZ(25px);
background: mix($color, white, 70%);
}
&:nth-child(2) {
transform: rotateX(90deg) translateZ(25px);
background: mix($color, white, 70%);
}
&:nth-child(3) {
transform: rotateY(90deg) translateZ(25px);
//background: mix($color, white, 90%);
animation: swap-color $time/10 linear infinite;
animation-delay: $time/100;
}
&:nth-child(4) {
transform: rotateY(-90deg) translateZ(25px);
//background: mix($color, white, 90%);
animation: swap-color $time/10 linear infinite;
animation-delay: $time/100;
}
&:nth-child(5) {
transform: rotateY(-180deg) translateZ(25px);
//background: mix($color, black, 90%);
animation: swap-color_2 $time/10 linear infinite;
animation-delay: $time/100;
}
&:nth-child(6) {
transform: rotateY(0) translateZ(25px);
//background: mix($color, black, 90%);
animation: swap-color_2 $time/10 linear infinite;
animation-delay: $time/100;
}
}
@keyframes swap-color {
0%, 5% {
background: mix($color, white, 50%);
}
95%, 100%{
background: $color;
}
}
@keyframes swap-color_2 {
0%, 5% {
background: $color;
}
95%, 100%{
background: mix($color, black, 50%);
}
}
@keyframes rotate {
0%, 5% {
transform: rotateY(0);
}
95%, 100%{
transform: rotateY(90deg);
}
}