Experiment CSS 3D Cubes

CSS selalu menjadi pilihan terbaik buat berekspresi dan sangat menantang untuk mencobanya.. kesempatan kali ini saya mencoba posting CSS 3D Cubes yang terinspirasi dari Timo Hausmann salah satu coding terbaik pilihan saya.penggunaan css akan erat sekali dengan peran CSS-Transform. untuk menghasilkan perputaran efek animasi.

DEMO

HTML

<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>

CSS

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

Silahkan anda gunakan tempat membuat demo live yang biasa anda pakai seperti jsfiddle,jsbin,dabblet,Codepen dan lain-lain...
mungkin anda akan lebih baik lagi untuk membuat coding CSS3 Animation dan akan lebih berkesan jika anda sendiri yang membuatnya...