Minecraft Cube Experiment (not finished)

HTML
<div class="stage"> <div class="cube"> <figure class="back"></figure> <figure class="top"></figure> <figure class="bottom"></figure> <figure class="left"></figure> <figure class="right"></figure> <figure class="front"></figure> </div> </div>
CSS
html,body { height: 100%; width: 100%; background: #7AB952; display: flex; justify-content: center; align-items: center; overflow: hidden; } .stage { width: 600px; height: 100%; position: relative; perspective: 1600px; perspective-origin: 50% -100px; animation: introduceCube 1.5s ease-out; } .stage .cube { transform-style: preserve-3d; animation: rotate 10s infinite linear; } .stage .cube-positioning { width: 100%; height: 100%; transform-style: preserve-3d; position: absolute; } .stage figure { display: block; width: 300px; height: 300px; left: 150px; top: 150px; background-color: #64a43a; background-image: url(http://hop.ie/cube/minecraft/images/mc_side.png); background-size: 100%; position: absolute; backface-visibility: hidden; overflow: hidden; -webkit-box-reflect: below 0 -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(60%,transparent),to(RGBA(0,0,0,0.25))); } .stage figure:before,.stage figure:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; opacity: 0; } .stage figure:before { background: -webkit-gradient(radial,0% 0%,0,0% 0%,100,color-stop(0%,rgba(0,0,0,0.5)),color-stop(100%,#000)); background: -webkit-radial-gradient(top left,rgba(0,0,0,0.5),#000); background: -moz-radial-gradient(top left,rgba(0,0,0,0.5),#000); background: -o-radial-gradient(top left,rgba(0,0,0,0.5),#000); background: radial-gradient(top left,rgba(0,0,0,0.5),#000); z-index: 10; } .stage figure:after { background: -webkit-gradient(radial,100% 0%,0,100% 0%,100,color-stop(0%,rgba(0,0,0,0.5)),color-stop(100%,#000)); background: -webkit-radial-gradient(top right,rgba(0,0,0,0.5),#000); background: -moz-radial-gradient(top right,rgba(0,0,0,0.5),#000); background: -o-radial-gradient(top right,rgba(0,0,0,0.5),#000); background: radial-gradient(top right,rgba(0,0,0,0.5),#000); z-index: 10; } .stage .back { -webkit-transform: rotateY(180deg) translateZ(150px); -moz-transform: rotateY(180deg) translateZ(150px); -ms-transform: rotateY(180deg) translateZ(150px); -o-transform: rotateY(180deg) translateZ(150px); transform: rotateY(180deg) translateZ(150px); } .stage .top { transform: rotateX(90deg) translateZ(150px); background-image: url(../images/mc_top.png); -webkit-box-reflect: none; } .stage .top:after { content: " "; opacity: .5; width: 200%; height: 200%; margin-left: -50%; margin-top: -50%; background: -webkit-gradient(radial,50% 100%,0,50% 100%,100,color-stop(0%,rgba(0,0,0,0)),color-stop(100%,#000)); background: -webkit-radial-gradient(bottom,rgba(0,0,0,0),#000); background: -moz-radial-gradient(bottom,rgba(0,0,0,0),#000); background: -o-radial-gradient(bottom,rgba(0,0,0,0),#000); background: radial-gradient(bottom,rgba(0,0,0,0),#000); animation: rotateTop 10s infinite linear; } .stage .bottom { transform: rotateX(-90deg) translateZ(150px); box-shadow: 0 10px 100px rgba(0,0,0,0.7); backface-visibility: visible; background-color: rgba(0,0,0,0); -webkit-box-reflect: none; } .stage .left { transform: rotateY(-90deg) translateZ(150px); } .stage .left:before { animation: leftShading1 10s infinite linear; } .stage .left:after { animation: leftShading2 10s infinite linear; } .stage .right { transform: rotateY(90deg) translateZ(150px); } .stage .right:before { animation: rightShading1 10s infinite linear; } .stage .right:after { animation: rightShading2 10s infinite linear; } .stage .front { transform: translateZ(150px); } .stage .front:before { animation: frontShading1 10s infinite linear; } .stage .front:after { animation: frontShading2 10s infinite linear; } @keyframes rotate { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } } @-webkit-keyframes frontShading1 { 2% { opacity: 0; } 25% { opacity: .9; } 35% { opacity: .9; } 50% { opacity: 0; } } @-o-keyframes frontShading1 { 2% { opacity: 0; } 25% { opacity: .9; } 35% { opacity: .9; } 50% { opacity: 0; } } @keyframes frontShading1 { 2% { opacity: 0; } 25% { opacity: .9; } 35% { opacity: .9; } 50% { opacity: 0; } } @keyframes frontShading2 { 50% { opacity: 0; } 60% { opacity: .9; } 75% { opacity: .9; } 100% { opacity: 0; } } @keyframes backShading1 { 25% { opacity: .9; } 50% { opacity: 0; } 75% { opacity: 0; } 80% { opacity: .9; } } @keyframes backShading2 { 25% { opacity: 0; } 50% { opacity: 0; } 75% { opacity: .9; } 80% { opacity: .9; } } @keyframes leftShading1 { 0% { opacity: 0; } 25% { opacity: 0; } 50% { opacity: .9; } 60% { opacity: .9; } } @keyframes leftShading2 { 0% { opacity: .9; } 25% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: .9; } } @keyframes rightShading2 { 50% { opacity: .9; } 75% { opacity: 0; } 100% { opacity: 0; } } @keyframes rightShading1 { 10% { opacity: .9; } 50% { opacity: 0; } 75% { opacity: 0; } 100% { opacity: .9; } } @keyframes rotateTop { 0% { transform: rotateZ(0); } 100% { transform: rotateZ(360deg); } }
JAVASCRIPT
Expand for more options Login