//<div class="mod">
  <div class="cube">
    
    <div class="faces f1">
      
      <div class="dot p1"></div>
      <div class="dot p2"></div>
      <div class="dot p3"></div>
      
      <div class="dot p4"></div>
      <div class="dot p5"></div>
      <div class="dot p6"></div>
      
      <div class="dot p7"></div>
      <div class="dot p8"></div>
      <div class="dot p9"></div>
  
    </div>
    
    <div class="faces f2">
      
      <div class="dot p10"></div>
      <div class="dot p11"></div>
      <div class="dot p12"></div>
      <div class="dot p13"></div>
  
    </div>
    
    <div class="faces f3">
      
      <div class="dot p1"></div>
      <div class="dot p2"></div>
      <div class="dot p3"></div>
      
      <div class="dot p4"></div>
      <div class="dot p5"></div>
      <div class="dot p6"></div>
      
      <div class="dot p7"></div>
      <div class="dot p8"></div>
      <div class="dot p9"></div>
  
    </div>
  
    <div class="faces f4">
      
      <div class="dot p10"></div>
      <div class="dot p11"></div>
      <div class="dot p12"></div>
      <div class="dot p13"></div>
  
    </div>
  
    <div class="faces f5">
      
      <div class="dot p1"></div>
      <div class="dot p2"></div>
      <div class="dot p3"></div>
      
      <div class="dot p4"></div>
      <div class="dot p5"></div>
      <div class="dot p6"></div>
      
      <div class="dot p7"></div>
      <div class="dot p8"></div>
      <div class="dot p9"></div>
  
    </div>
  
    <div class="faces f6">
      
      <div class="dot p10"></div>
      <div class="dot p11"></div>
      <div class="dot p12"></div>
      <div class="dot p13"></div>
  
    </div>
  
    <div class="faces f7">
      
      <div class="dot p1"></div>
      <div class="dot p2"></div>
      <div class="dot p3"></div>
      
      <div class="dot p4"></div>
      <div class="dot p5"></div>
      <div class="dot p6"></div>
      
      <div class="dot p7"></div>
      <div class="dot p8"></div>
      <div class="dot p9"></div>
  
    </div>
  
    <div class="faces f8">
      
      <div class="dot p10"></div>
      <div class="dot p11"></div>
      <div class="dot p12"></div>
      <div class="dot p13"></div>
  
    </div>
  
    <div class="faces f9">
      
      <div class="dot p1"></div>
      <div class="dot p2"></div>
      <div class="dot p3"></div>
      
      <div class="dot p4"></div>
      <div class="dot p5"></div>
      <div class="dot p6"></div>
      
      <div class="dot p7"></div>
      <div class="dot p8"></div>
      <div class="dot p9"></div>
  
    </div>
  
    <div class="faces f10">
      
      <div class="dot p10"></div>
      <div class="dot p11"></div>
      <div class="dot p12"></div>
      <div class="dot p13"></div>
  
    </div>
  
    <div class="faces f11">
      
      <div class="dot p1"></div>
      <div class="dot p2"></div>
      <div class="dot p3"></div>
      
      <div class="dot p4"></div>
      <div class="dot p5"></div>
      <div class="dot p6"></div>
      
      <div class="dot p7"></div>
      <div class="dot p8"></div>
      <div class="dot p9"></div>
  
    </div>
    
  </div>
  
  <div class="project-name">
    <div class="l1">project-</div>
    <div class="l2">-quantum</div>
  </div>
  
</div>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,100);
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700,300,100);
@size-cube: 210px;
@faces-interval: (@size-cube/2)/5;
@size-dot: 2px;
@delay-anim: .3s;
body {
  margin: 0;
  padding: 0;
  background: #0033FF;
  font-family: 'Roboto', sans-serif;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased!important;
  text-rendering: optimizeLegibility!important;
  -moz-osx-font-smoothing: grayscale;
}

.mod {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  perspective: 330px;
  //background: #0033FF;
  background: #225CFF;
  
  .project-name {
    position: absolute;
    width: @size-cube*2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.75em;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    text-align: center;
    line-height: 1.5em;
    font-family: 'Roboto Mono';
    font-weight: 300;
  }
  .cube {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -@size-cube/2;
    margin-left: -@size-cube/2;
    width: @size-cube;
    height: @size-cube;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: @size-cube/2 @size-cube/2;
    animation: spinCube 9000ms linear infinite;
    .faces {
      position: absolute;
      top: 0px;
      left: 0px;
      width: @size-cube;
      height: @size-cube;
      //animation: spinCube 4500ms linear infinite;
      
      .dot {
        position: absolute;
        background: rgba(255, 255, 255, 1);
        width: @size-dot;
        height: @size-dot;
        border-radius: 50%;
      }
      .p1 {
        top: -@size-dot/2;
        ;
        margin-left: -@size-dot/2;
      }
      .p2 {
        top: -@size-dot/2;
        ;
        left: 50%;
        margin-left: - (@size-dot/2);
      }
      .p3 {
        top: -@size-dot/2;
        ;
        left: 100%;
        margin-left: -@size-dot/2;
      }
      .p4 {
        top: 50%;
        left: -@size-dot/2;
        margin-top: -@size-dot/2;
      }
      .p5 {
        top: 50%;
        left: 50%;
        margin-top: -@size-dot/2;
        margin-left: -@size-dot/2;
      }
      .p6 {
        top: 50%;
        left: 100%;
        margin-top: -@size-dot/2;
        margin-left: -@size-dot/2;
      }
      .p7 {
        top: 100%;
        left: 0%;
        margin-top: -@size-dot/2;
        margin-left: -@size-dot/2;
      }
      .p8 {
        top: 100%;
        left: 50%;
        margin-top: -@size-dot/2;
        margin-left: -@size-dot/2;
      }
      .p9 {
        top: 100%;
        left: 100%;
        margin-top: -@size-dot/2;
        margin-left: -@size-dot/2;
      }
      .p10 {
        top: 25%;
        ;
        left: 25%;
        margin-top: -@size-dot/2;
        margin-left: -@size-dot/2;
      }
      .p11 {
        top: 25%;
        ;
        left: 75%;
        margin-top: -@size-dot/2;
        margin-left: -@size-dot/2;
      }
      .p12 {
        top: 75%;
        ;
        left: 25%;
        margin-top: -@size-dot/2;
        margin-left: -@size-dot/2;
      }
      .p13 {
        top: 75%;
        ;
        left: 75%;
        margin-top: -@size-dot/2;
        margin-left: -@size-dot/2;
      }
    }
    .f1 {
      -webkit-transform: translateZ(-@faces-interval*5);
      animation-delay: @delay-anim;
    }
    .f2 {
      -webkit-transform: translateZ(-@faces-interval*4);
      animation-delay: @delay-anim*2;
    }
    .f3 {
      -webkit-transform: translateZ(-@faces-interval*3);
      animation-delay: @delay-anim*3;
    }
    .f4 {
      -webkit-transform: translateZ(-@faces-interval*2);
      animation-delay: @delay-anim*4;
    }
    .f5 {
      -webkit-transform: translateZ(-@faces-interval*1);
      animation-delay: @delay-anim*5;
    }
    .f6 {
      -webkit-transform: translateZ(0px);
      animation-delay: @delay-anim*6;
    }
    .f7 {
      -webkit-transform: translateZ(@faces-interval*1);
      animation-delay: @delay-anim*7;
    }
    .f8 {
      -webkit-transform: translateZ(@faces-interval*2);
      animation-delay: @delay-anim*8;
    }
    .f9 {
      -webkit-transform: translateZ(@faces-interval*3);
      animation-delay: @delay-anim*9;
    }
    .f10 {
      -webkit-transform: translateZ(@faces-interval*4);
      animation-delay: @delay-anim*10;
    }
    .f11 {
      -webkit-transform: translateZ(@faces-interval*5);
      animation-delay: @delay-anim*11;
    }
  }
}

@-webkit-keyframes spinCube {
  0% {
    -webkit-transform: rotateY(0deg) rotateX(-45deg) rotate(0deg);
  }
  50% {
    -webkit-transform: rotateY(180deg) rotateX(135deg) rotate(180deg);
  }
  100% {
    -webkit-transform: rotateY(360deg) rotateX(315deg) rotate(360deg);
  }
}

@-webkit-keyframes spinDots {
  0% {
    -webkit-transform: rotateX(0deg) rotateY(45deg);
  }
  50% {
    -webkit-transform: rotateX(-180deg) rotateY(-135deg);
  }
  100% {
    -webkit-transform: rotateX(-360deg) rotateY(-315deg);
  }
}

@-webkit-keyframes spinFaces {
  0% {
    -webkit-transform: rotateX(0deg);
  }
  50% {
    -webkit-transform: rotateX(180deg);
  }
  100% {
    -webkit-transform: rotateX(0deg);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.