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, #container-3d { 
	position:relative;
	-webkit-perspective: 600px; /* Value chosen to look decent. Smaller value, less perspective distortion. */
	-moz-perspective: 600px; /* Value chosen to look decent. Smaller value, less perspective distortion. */
	perspective: 600px; /* Value chosen to look decent. Smaller value, less perspective distortion. */
	display:none;
	height:600px;
	overflow:hidden;
	border-style: solid;
	border-width:3px;
	border-color:gray;
}

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

.cube, #cube { 
	position: relative; 
	width: 0; 
	height: 0; 
	top: 0px; 
	margin: 0 auto; 
	-webkit-transform-style: preserve-3d; 
	-moz-transform-style: preserve-3d; 
	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; 
	-moz-backface-visibility: hidden; 
	backface-visibility: hidden; 
}
 
.cube-top, #cube-top { 
	-webkit-transform: translate3d(0, -300px, 0) rotate3d(1, 0, 0, -90deg) rotate3d(0, 0, 1, 90deg); 
} 
 
.cube-bottom, #cube-bottom { 
	-webkit-transform: translate3d(0, 300px, 0) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, -90deg); 
}

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

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

.polygon-face {}; 

.polygon-0 {} .polygon-1 {} .polygon-2 {} .polygon-3 {} .polygon-4 {} .polygon-5 {} .polygon-6 {} .polygon-7 {} .polygon-8 {} .polygon-9 {} .polygon-10 {} .polygon-11 {} .polygon-12 {} .polygon-13 {} .polygon-14 {} .polygon-15 {} .polygon-16 {} .polygon-17 {} .polygon-18 {} .polygon-19 {} .polygon-20 {} .polygon-21 {} .polygon-22 {} .polygon-23 {} .polygon-24 {} .polygon-25 {} .polygon-26 {} .polygon-27 {} .polygon-28 {} .polygon-29 {}  .polygon-30 {} .polygon-31 {} .polygon-32 {} .polygon-33 {}  .polygon-34 {} .polygon-35 {}