cube 3d world

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="ma">
    <div class="con">
    <div class="cube f"><img src="http://lorempixel.com/400/400/cats/" alt=""></div>
    <div class="cube b"></div>
    <div class="cube l"></div>
    <div class="cube r"></div>
    <div class="cube t"></div>
    <div class="cube bo"></div>
</div>
</div>

CSS

.cube {
    width: 300px;
    height: 300px;
    opacity: 1;
    position: absolute;
    display: inline-block;
}
html,body{ text-align: center; }
body{-webkit-perspective: 1000px; overflow:hidden;}
.ma{
 -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;
    display: inline-block; -webkit-transform: translate3d(0px, 0px, 1000px);

}
.con {
     margin:50px auto;
    -webkit-transform-style: preserve-3d;
    position: relative;
    display: inline-block;
    width: 100px; height: 100px;
}
.f{ -webkit-transform: translateZ(150px); background-color: blue;}
.b{ -webkit-transform: translateZ(-150px); background-color: green;}
.r{ -webkit-transform: translateX(-150px) rotateY(-90deg); background-color: yellow; }
.l{ -webkit-transform: translateX(150px) rotateY(90deg); background-color: red;}
.t{ -webkit-transform: translateY(-150px) rotateX(-90deg); background-color: purple; }
.bo{ -webkit-transform: translateY(150px) rotateX(90deg); background-color: pink;}
*{pointer-events: none;
-webkit-user-select: none;margin: 0; padding: 0;}

JavaScript

var ax=-3,ay=0,az=-33,ry=0,rx=0,rox=0,roy=0, speed=5, ts=30,nokey=1, kar={}; 
  

$(document).ready(function(){



var c =$('.con'),ma=$('.ma'),f, ox,oy; 
c[0].requestPointerLock = c[0].requestPointerLock ||
                            c[0].mozRequestPointerLock ||
                            c[0].webkitRequestPointerLock;

c[0].requestPointerLock()
    $(this).on('mousedown',function(v){
     
       if(!f){ox=v.pageX; oy=v.pageY; f=1; rox=rx; roy=ry;}
        $(this).bind('mousemove',ch);})
       .on('mouseup',function(){f=null; $(this).unbind('mousemove',ch);  rox=rx; roy=ry;})
       .on('keydown',addK)
       .on('keyup',rmK);
    
generate(20,1000);
    
function ch(e){
    ox -=e.originalEvent.webkitMovementX;
    oy -=e.originalEvent.webkitMovementY;
   var rnx=-(e.pageY-oy), rny=(e.pageX-ox);
   rx=rox+rnx; ry=roy+rny;
   (ry<=0)?d+=180: (rx<=0 && ry>=0)&&(d+=360);
}

function rmK(e) { kar[e.which]=false;}
function addK(e){ if(!kar[e.which]) kar[e.which]=true; return false;}

var loop= setInterval(move,16);

function move(){
    nokey=1;
    for (var ks in kar) {
        if (kar[ks]==true) {sign(+(ks)); nokey=0;}
        
    }
    if(nokey) speed=1;
    if(speed<ts) speed+= speed*.1;

    function sign(x){
        switch (x) {
            case 38: forwBack(1); break;
            case 40: forwBack(-1); break;
            case 39: rightLeft(1); break;
            case 37: rightLeft(-1); break;
        }
    }
        function forwBack(x){ 
           az+= x*(Math.cos((Math.PI/180)*ry))*Math.cos((Math.PI/180)*rx)*speed;
           ax-= x*(Math.sin((Math.PI/180)*ry))*Math.cos((Math.PI/180)*rx)*speed;
           ay+= x*(Math.sin((Math.PI/180)*rx))*speed; 
        }
         function rightLeft(x){
           az+= Math.cos((ry+90)*(Math.PI/180))*speed*x;
           ax-= Math.sin((ry+90)*(Math.PI/180))*speed*x;
           ay+= 0; 
        }
        c.css({'-webkit-transform':'translate3d('+ax+'px,'+ay+'px,'+az+'px)'});
       ...