index.html

<section class="container" id="container">
  <div class="shadowContainer">
    	<div class="shadow" id="shadow"><div class="shadow2" id="shadow2"></div></div>
    </div>
  <div id="box">
    <figure class="front" id="front">
    	<img src="https://lh6.googleusercontent.com/-y9johWORM1M/UE-UenoHP5I/AAAAAAAAAGg/0Gnd4KiCdSA/s900/background+large.png" id="largeBG" width="900" height="400" style="-webkit-transform: rotate(180deg)" />
    	<img src="https://lh4.googleusercontent.com/-uoU1Xjv2AXk/UE-Ufg1bHkI/AAAAAAAAAG0/VSHNMQfQ1A0/s500/newFront2.png" height="500" width="305" style="-webkit-transform: rotate(180deg)" />
        <figure class="shine" id="shine"></figure>
    </figure>
    <figure class="back" id="back">
    	<img src="https://lh4.googleusercontent.com/-t5sLgneIlJw/UE-UeYqYvJI/AAAAAAAAAGU/4uMFGKTIjoE/s500/back.png" height="500" width="305" />
    </figure>
    <figure class="farBack" id="farBack">
    	<img src="https://lh4.googleusercontent.com/-3IrFv-rLpV8/UE-UejJx64I/AAAAAAAAAGc/FKSIW8VF9Vs/s500/farBack.png" height="500" width="305" />
    </figure>
    <figure class="right" id="right">
    	<img src="https://lh5.googleusercontent.com/-PAlfQ7czqzA/UE-UfGM60NI/AAAAAAAAAGs/GWbbfvPcmXA/s500/left.png" height="500" width="28" style="-webkit-transform: rotate(180deg)" />
    </figure>
    <figure class="left" id="left">
    	<img src="https://lh4.googleusercontent.com/-pqn4fjm0p-w/UE-UftnBvtI/AAAAAAAAAG4/IgBWLIr1NEA/s500/right.png" height="500" width="28" style="-webkit-transform: rotate(180deg)" />
    </figure>
    <figure class="top" id="top">
    </figure>
    <figure class="bottom" id="bottom">
    </figure>
  </div>
</section>
<label>perspective</label>
<input type="range" id="perspRange" />

<div id="test"></div>
<div id="backgroundSurf"></div>

script.js

document.getElementById('container').addEventListener('mousemove', function(e){
  var container = document.getElementById('container'),
		box = document.getElementById('box'),
		x = e.pageX - container.offsetLeft,
		y = e.pageY - container.offsetHeight,
		yAct = e.pageY - container.offsetTop,
		centerX = container.offsetWidth*0.5,
		centerY = container.offsetHeight*0.5,
		dist = Math.sqrt((x-centerX)*(x-centerX)+(y-centerY)*(y-centerY)),
		distPer = dist / container.offsetHeight,
		xPer = x / (container.offsetWidth+50),
		yPer = y / container.offsetHeight,
		frontFace = document.getElementById('front'),
		backFace = document.getElementById('back'),
		leftFace = document.getElementById('left'),
		rightFace = document.getElementById('right'),
		topFace = document.getElementById('top'),
		bottomFace = document.getElementById('bottom'),
		shine = document.getElementById('shine'),
		shadow = document.getElementById('shadow'),
		shadow2 = document.getElementById('shadow2'),
		largeBG = document.getElementById('largeBG'),
		farBack = document.getElementById('farBack'),
		gVal = yAct / 500,
		g1, g2, g3, tempG;
		
	if (gVal > 1) {
		gVal = 1;
	}
	if (gVal <= .8) {
		tempG = Math.abs(1-gVal);
		g1 = tempG; // 100 - 66
		g2 = tempG*.5; // 66 - 33
		g3 = gVal; // 33 - 0
	} else {
		tempG = Math.abs(1-gVal);
		g1 = tempG; // 66 - 33
		g2 = tempG*2; // 100 - 66
		g3 = gVal; // 33 - 66
	}
	
	largeBG.style.right = -(xPer*900)+90+'px';
	
	//shadow.style.backgroundImage = '-webkit-linear-gradient(bottom, rgba(0,0,0, '+(g1*.5)+') 10%, rgba(0,0,0, '+(g2*.5)+') 50%, rgba(0,0,0, '+(g3*.5)+') 99%)';
	//shadow2.style.backgroundImage = '-webkit-linear-gradient(bottom, rgba(0,0,0, '+(g1*.5)+') 10%, rgba(0,0,0, '+(g2*.5)+') 50%, rgba(0,0,0, '+(g3*.5)+') 99%)';
	shadow.style.height = (Math.abs(gVal)*200+100)+'px';
	//shadow.style.webkitTransform = 'rotate('+((yAct / 500)*10)+'deg)';
	// shadow.style.width = (xPer*300)+'px';
	//shadow.style.left = -(dist*.4)+'px';
	shadow.style.top = (-(Math.abs((gVal))*150+150))+'px';
	shadow.style.left = (-(Math.abs(gVal*100)))+'px';
	
	box.style.webkitTransform = 'rotateY('+(xPer*360)+'deg) rotateX('+((distPer*90)+90)+'deg)';
/*	document.getElementById('test').innerHTML = ''+
		'<br /> gVal : '+gVal;
		/*'<br /> g1 : '+g1+
		'<br /> g2 : '+g2+
		'<br /> g3 : '+g3;
		'<br /> yPer : '+ yPer;
		'Mbr /> x : '+ x+
		'<br /> y : '+y+
		'<br /> centerX : '+centerX+
		'<br /> centerY : '+centerY+
		'<br /> dist : ' +dist+
		'<br /> distPer : '+distPer+
		'<br /> xPer : ' +xPer; */
		
	// put the sides in the center
	leftFace.style.opacity = 0;
	rightFace.style.opacity = 0;
	backFace.style.opacity = 0;
	frontFace.style.opacity = 0;
	farBack.style.opacity = 1;
	
	leftFace.style.webkitTransform = 'rotateY( -90deg ) translateZ(  152px )'; // move to 305
	rightFace.style.webkitTransform = 'rotateY(  90deg ) translateZ(  -152px )'; // move to 0
	backFace.style.webkitTransform = 'rotateX( 180deg ) translateZ( 14px )';
	
	yPer = Math.abs((1+yPer)*50);
	
	shine.style.backgroundImage = '-webkit-linear-gradient(top left, rgba(255,255,255, 100) '+yPer+'%, rgba(255,255,255, 0) '+yPer+'%)';
	if (xPer > 1) {
		xPer = 1;
	}
	if (xPer <= .25) {
		
		xPer /= .25;
		
		shadow.style.width = (305-(xPer*250))+'px'; // smaller
		//shadow.style.left = (xPer*40)+'px';
		//shadow.style.webkitTransform = 'rotate('+(xPer*15)+'deg)'; // thin to thick
		
		leftFace.style.opacity = xPer+.2;
		rightFace.style.opacity = xPer+.2;
		backFace.style.opacity = 1;
		
		leftFace.style.webkitTransform = 'rotateY( -90deg ) translateZ(  '+(280 + (10*xPer))+'px )';
		backFace.style.webkitTransform = 'rotateX( 180deg ) translateZ(  '+(14+(-24*xPer))+'px )';
		rightFace.style.webkitTransform = 'rotateY( 90deg ) translateZ(  '+(-65 + (65*xPer))+'px )';
		
	} else if (xPer <= .5) {
		
		shadow.style.width = (((xPer-.25)*1080)+55)+'px';
		//shadow.style.left = 40-(xPer*80)+'px';
		
		farBack.style.opacity = 0;
		
		frontFace.style.opacity = 1;
		leftFace.style.opacity = 1;
		
		leftFace.style.webkitTransform = 'rotateY( -90deg ) translateZ(  '+(305 - (65*xPer))+'px )';
		
	} else if (xPer <= .75) {
		
		frontFace.style.opacity = 1;
		rightFace.style.opacity = 1;
		farBack.style.opacity = 0;
		
		rightFace.style.webkitTransform = 'rotateY( 90deg ) translateZ(  '+(-65 + (70*xPer))+'px )';
		
		xPer -= .5;
		xPer /= .25;
		
		shadow.style.width = (305-(xPer*250))+'px'; // smaller
		//shadow.style.left = (xPer*40)+'px';
	} else {
		
		xPer -= .75;
		xPer /= .25;
		
		shadow.style.width = (((xPer)*250)+55)+'px';
		//shadow.style.left = 40-(xPer*80)+'px';
		
		rightFace.style.opacity = Math.abs(1-xPer);
		leftFace.style.opacity = Math.abs(1-xPer)-.1;
		backFace.style.opacity = 1;
		
		leftFace.style.webkitTransform = 'rotateY( -90deg ) translateZ(  '+(305-(xPer*48))+'px )';
		rightFace.style.webkitTransform = 'rotateY( 90deg ) translateZ(  '+(-(xPer*65))+'px )';
		backFace.style.webkitTransform = 'rotateX( 180deg ) translateZ( '+(-10+(25*xPer))+'px )'; // from -10 to +14
	}
},true);

document.getElementById('perspRange').addEventListener('change', function(){
	document.getElementById('container').style.webkitPerspective = (this.value*10)+'px';
}, true);

style.css

/*
* I know that this model is not scale-able
  I will likly address this isue in a futer generation
* I also have not added the top and bottom faces yet
	I will be building that too
*/

body {
	background-color: #555555;
}

.container {
  padding: 50px;
  width: 305px;
  height: 500px;
  position: relative;
  -webkit-perspective: 1000px;
  left: 25%;
  top: - 250px;
}

#box {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
}

figure {
	opacity: 1;
}

/* size of each face */
#box figure {
  display: block;
  position: absolute;
}

#box .front,
#box .back {
  width: 305px;
  height: 500px;
}

#box .right,
#box .left {
  width: 28px;
  height: 500px;
  left: 291px; /* (width - depth) /2*/
}

#box .top,
#box .bottom {
  width: 305px;
  height: 28px;
  top: 486px; /* (height - depth) /2*/
}

/* put the faces where they belong */
#box .front   { -webkit-transform: rotateY(   0deg ) translateZ( 15px  ); } /* translateZ : width / 2 */
#box .back	  { -webkit-transform: rotateX( 180deg ) translateZ( 14px  ); } /* translateZ : width / 2 */
#box .farBack { -webkit-transform: rotateX( 180deg ) translateZ( 12px  ); }
#box .right   { -webkit-transform: rotateY(  90deg ) translateZ( 0px   ); } 
#box .left    { -webkit-transform: rotateY( -90deg ) translateZ( 305px ); }
#box .top     { -webkit-transform: rotateX(  90deg ) translateZ( 500px ); }
#box .bottom  { -webkit-transform: rotateX( -90deg ) translateZ( 0px   ); }

/*effects*/
.shine {
	width: 299px;
	height: 495px;
	position: absolute;
	top: -13px;
	left: -37px;
	-webkit-transform: rotate(180deg);
	opacity: .4;
	border-radius: 20px;
	background-image: -webkit-linear-gradient(top left, rgba(255,255,255, 100) 38%, rgba(255,255,255, 0) 38%);
}
.shadowContainer {
	border-radius: 20px;
	position: absolute;
	top: 300px;
	left: -80px;
	height: 500px;
	width: 500px;
}
.shadow {
	top: -300px;
	left: -400px;
	border-radius: inherit;
	position: absolute;
	height: 120px;
	width: 305px;
	opacity: 1;
	-webkit-transform: rotate(0deg);
	-webkit-box-shadow: 400px 400px 60px #222222;
}
.front {
	overflow: hidden;
}
#largeBG {
	position: absolute;
	right: 0px;
	bottom: 30px;
}
#backgroundSurf {
	position: absolute;
	width: 1600px;
	height: 400px;
	z-index: -1;
	top: 0px;
}