#experiment {
    -webkit-perspective: 1500;
    -webkit-perspective-origin: 50% 200px;
	
	position: relative;
	top: 300px;
	
}
 

#cube {
    position: relative;
    margin: 0 auto;
    height: 500px;
    width: 500px;
    -webkit-transition: -webkit-transform 2s linear;
    -webkit-transform-style: preserve-3d;
	
	padding: 0px;
}

 
.face {
    position: absolute;
    height: 500px;
    width: 500px;
    /*padding: 20px;*/
    padding: 0px;
    background-color: rgba(0, 0, 0, 1);
	font-family: "Impact" Times sans-serif;
	font-size: 20em;
	opacity: .8;
	
}
.text
 {
	text-align: center;
	margin-top: 10%;
	margin-bottom:auto;
	color: white;
}
.myhundred
{
color:red;
}
.myfive
{
	color:green;
}
.myfifteen
{
	color:green;
}
/*
p = # of panels
rotate = (p-2) * (180/p)
*/
#cube .one {
      -webkit-transform: rotateX(60deg) translateZ(500px);
    }
 
#cube .two {
  -webkit-transform: rotateX(120deg) translateZ(500px);
}

#cube .three {
  -webkit-transform: rotateX(180deg) translateZ(500px);
}

#cube .four {
  -webkit-transform: rotateX(240deg) translateZ(500px);
}

#cube .five {
  -webkit-transform: rotateX(300deg) translateZ(500px);
}

#cube .six {
  -webkit-transform: rotateX(360deg) translateZ(500px);
}