Cubical

by Felis Catus

HTML

<div class="container">
    <div class="cubeaxis">
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
    </div>
</div>
<div class="container">
    <div class="cubeaxis">
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
    </div>
    <div class="cubeaxis">
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
    </div>
    <div class="cubeaxis">
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
    </div>
    <div class="cubeaxis">
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
    </div>
    <div class="cubeaxis">
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
    </div>
</div>
<div class="container">
    <div class="cubeaxis">
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
        <div class="cubeface"></div>
    </div>
</div>

CSS

body {
  /*background-color: #444;*/
}
@-webkit-keyframes rotatio {
    0% { transform: rotateY(0deg); }
    100% {transform: rotateY(360deg); }
}
@-webkit-keyframes rotatioB {
    0% { transform: rotateY(0deg) translateZ(-35px) ; }
    100% {transform: rotateY(360deg) translateZ(-35px); }
}
@-webkit-keyframes rotatioT {
    0% { transform: rotateY(0deg) translateZ(35px) ; }
    100% {transform: rotateY(360deg) translateZ(35px); }
}
@-webkit-keyframes light {
    0% { background-color: rgba(80,0, 176, 1); }
    25% { background-color: rgba(50,0, 116, 1); }
    60% { background-color: rgba(50,0, 116, 1); }
    80% { background-color: rgba(100, 40, 200, 1); }
    100% { background-color: rgba(80,0, 176, 1); }
}

@keyframes rotatio {
    0% { transform: rotateY(0deg); }
    100% {transform: rotateY(360deg); }
}
div.container {
    position: relative;
    perspective: 1300px;
    perspective-origin: 50% -350px;
    transform-style: preserve-3d;
    width: 50px;
    height: 50px;
    margin: -12px;
}
.container:nth-child(1) {
    z-index: 3;
}
.container:nth-child(2) {
    z-index: 2;
}
.container:nth-child(3) {
    z-index: 1;
}
div.cubeaxis {
    position:absolute;
    top: 50px;
    left: 50px;
    width: 30px;
    height: 30px;
    overflow: visible;
    backface-visibility: visible;
    transform-style: preserve-3d;
    -webkit-animation-duration: 3s;
    -webkit-animation-name: rotatio;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-duration: 3s;
    animation-name: rotatio;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
div.cubeaxis:nth-child(2) {
  left: 12px;
  transform-origin: 52px 0;
}
div.cubeaxis:nth-child(3) {
  left: 87px;
  transform-origin: -22px 0;
}
div.cubeaxis:nth-child(4) {
   animation-name: rotatioB;
}
div.cubeaxis:nth-child(5) {
   animation-name: rotatioT;
}
div.cubeface {
    width: 30px;
    height: 30px;
    
    background: rgba(80,0, 176,...