Experiment CSS 3D Cubes

<div id="viewport">
    <div class="cube">
        <div class="plain">
        </div>
        <div class="plain">
        </div>
        <div class="plain">
        </div>
        <div class="plain">
        </div>
        <div class="plain">
        </div>
        <div class="plain">
        </div>
    </div>
</div>

#viewport {background-color: #000000;
        width: 600px;
        height: 350px;
        margin:0 auto;    
        position: relative;       
         -webkit-perspective: 700px;
         -webkit-perspective-origin: 50% 50%;
         -moz-perspective: 700px;
         -moz-perspective-origin: 50% 50%;
         -ms-perspective: 700px;
         -ms-perspective-origin: 50% 50%;
}
.cube {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
        width: 100px;
        height: 100px;
        -webkit-animation: test 5s infinite;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform-style: preserve-3d;
        -moz-animation: test 5s infinite;
        -moz-transform-origin: 50% 50%;
        -moz-transform-style: preserve-3d;
        -ms-animation: test 5s infinite;
        -ms-transform-origin: 50% 50%;
        -ms-transform-style: preserve-3d;
}
@-webkit-keyframes test {
        0% {
                -webkit-transform: rotateX(0deg) rotateY(-45deg);
        }
        50% {
                -webkit-transform: rotateX(90deg) rotateY(315deg);
        }
        100% {
                -webkit-transform: rotateX(180deg) rotateY(-45deg);
        }
}
@-moz-keyframes test {
        0% {
                -moz-transform: rotateX(0deg) rotateY(-45deg);
        }
        50% {
                -moz-transform: rotateX(90deg) rotateY(315deg);
        }
        100% {
                -moz-transform: rotateX(180deg) rotateY(-45deg);
        }
}
@-ms-keyframes test {
        0% {
                -ms-transform: rotateX(0deg) rotateY(-45deg);
        }
        50% {
                -ms-transform: rotateX(90deg) rotateY(315deg);
        }
        100% {
                -ms-transform: rotateX(180deg) rotateY(-45deg);
        }
}
.cube .plain {
        position: absolute;
        display: block;
        content: "";
        width: 100px;
        height: 100px;
        background:rgba(0,0,0,0.75);
        border:2px dashed #fff;
        
        -webkit-box-sizing: border-box;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform-style: flat;
        -webkit-animation: bordercolor 5s infinite;
        
        -moz-box-sizing: border-box;
        -moz-transform-origin: 50% 50%;
        -moz-transform-style: flat;
        -moz-animation: bordercolor 5s infinite;
        
        -ms-box-sizing: border-box;
        -ms-transform-origin: 50% 50%;
        -ms-transform-style: flat;
        -ms-animation: bordercolor 5s infinite;
}
@-webkit-keyframes bordercolor {
        0% {
                border-color:#0cf;
        }
        50% {
                border-color:#fff;
        }
        100% {
                border-color:#0cf;
        }
}
@-moz-keyframes bordercolor {
        0% {
                border-color:#0cf;
        }
        50% {
                border-color:#fff;
        }
        100% {
                border-color:#0cf;
        }
}
@-ms-keyframes bordercolor {
        0% {
                border-color:#0cf;
        }
        50% {
                border-color:#fff;
        }
        100% {
                border-color:#0cf;
        }
}

.cube .plain:nth-child(1)  {
        -webkit-transform: rotateY(-90deg) translate3d(0, 0, 100px);
        -moz-transform: rotateY(-90deg) translate3d(0, 0, 100px);
        -ms-transform: rotateY(-90deg) translate3d(0, 0, 100px);
}
.cube .plain:nth-child(2) {
        -webkit-transform: rotateY(90deg) translate3d(0, 0, 100px);
        -moz-transform: rotateY(90deg) translate3d(0, 0, 100px);
        -ms-transform: rotateY(90deg) translate3d(0, 0, 100px);
}
.cube .plain:nth-child(3) {
        -webkit-transform: rotateX(-90deg) translate3d(0, 0, 100px);
        -moz-transform: rotateX(-90deg) translate3d(0, 0, 100px);
        -ms-transform: rotateX(-90deg) translate3d(0, 0, 100px);
}
.cube .plain:nth-child(4) {
        -webkit-transform: rotateX(90deg) translate3d(0, 0, 100px);
        -moz-transform: rotateX(90deg) translate3d(0, 0, 100px);
        -ms-transform: rotateX(90deg) translate3d(0, 0, 100px);
}
.cube .plain:nth-child(5) {
        -webkit-transform: rotateX(180deg) translate3d(0, 0, 100px);
        -moz-transform: rotateX(180deg) translate3d(0, 0, 100px);
        -ms-transform: rotateX(180deg) translate3d(0, 0, 100px);
}
.cube .plain:nth-child(6) {
        -webkit-transform: translate3d(0, 0, 100px);
        -moz-transform: translate3d(0, 0, 100px);
        -ms-transform: translate3d(0, 0, 100px);
}