body { background-color: #eeeeee; }

/*  
	Align six image divs to form a cube with the sides facing inwards.
	Viewpoint inside the cube, giving the effect of standing inside the cube looking out.
	The side of the cube is 600px
	
   	CSS3 Coordnate system:
		X: Left - Right. Increasing moves object right
		Y: Up - Down. Increasing moves object down
		Z: In - Out. Increasing Z values moves object towards viewer.

	Inspired by 
	- https://developer.apple.com/safaridemos/showcase/vr/styles/vr.css
	- http://www.westciv.com/tools/3Dtransforms/ (Great interactive page to test effect of parameters)
	- http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/

*/

#container-3d { 
	position:relative;
	-webkit-perspective: 600; /* Value chosen to look decent. Smaller value, less perspective distortion. */
}

#position-3d { 
	position: relative;
	-webkit-transform-style: preserve-3d; 
	/* try a translateZ value of about -300 to move viewer outside of the cube */
	-webkit-transform: translateX(0px) translateY(0px) translateZ(300px); 
}

#cube { 
	position: relative; 
	width: 0; 
	height: 0; 
	top: 0px; 
	margin: 0 auto; 
	-webkit-transform-style: preserve-3d; 
} 


/* 	Cube image faces are 600x600px
	Rotate sides to face INWARDS (ex. front face must be turned 180deg around the Y axis)
	and translate them to form a cube.
*/ 

img {
	width: 600;
	height: 600;
	border-style: solid;
    border-width: 3px;
	border-color: #ff0000;
}

.face { 
	display: block; 
	height: 600px; 
	position: absolute; 
	left: -300px; 
	top: -200px; /* This is part of aligning the cube so that the viewer is positioned inside, slightly below center */
	width: 600px;
	-webkit-backface-visibility: hidden; 
}
 
#cube-top { 
	-webkit-transform: translate3d(0, -300px, 0) rotate3d(1, 0, 0, -90deg) rotate3d(0, 0, 1, 90deg); 
} 
 
#cube-bottom { 
	-webkit-transform: translate3d(0, 300px, 0) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, -90deg); 
}

#cube-front { 
	-webkit-transform: translate3d(0, 0, 300px) rotate3d(0, 1, 0, 180deg); 
} 
 
#cube-back { 
	-webkit-transform: translate3d(0, 0, -300px); 
} 

#cube-left { 
	-webkit-transform: translate3d(-300px, 0, 0) rotate3d(0, 1, 0, 90deg); 
} 
 
#cube-right { 
	-webkit-transform: translate3d(300px, 0, 0) rotate3d(0, 1, 0, -90deg); 
}