numbers cube counter

index.html

.box
  .axis
    - var layers = 3
    while layers--
      .layer
        - var cubes = 15
        while cubes--
          .cube
            - var sides = 6
            while sides-- 
              .side

numbers cube counter.markdown

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)

A Pen by Gregor Adams on CodePen.

License.

style.css

$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); 
    }
  }