#controls, #transparency { text-align:center; }
#controls span { padding-right:2em; cursor:pointer; }

#cubespinner
   {
   -webkit-perspective: 800;
   -webkit-perspective-origin: 50% 100px;
   margin:100px auto 20px auto;
    width:450px;
   height:400px;
   }

#cubespinner #cube
   {
   position: relative;
   margin: 0 auto;
   height: 281px;
    width: 450px;
   -webkit-transform-style: preserve-3d;
   -webkit-transform-origin:(50% 100px 0);
   -webkit-transition:all 1.0s ease-in-out;
   }

#cubespinner #Ycube,#cubespinner #Zcube
   {
   -webkit-transform-style: preserve-3d;   
   }

#cubespinner .face
   {
   position: absolute;
   height: 281px;
   width: 450px;
   padding: 0px;
   }

#cube .one   { -webkit-transform: translateZ(225px); }
#cube .two   { -webkit-transform: rotateY(90deg) translateZ(225px); }
#cube .three { -webkit-transform: rotateY(180deg) translateZ(225px); }
#cube .four  { -webkit-transform: rotateY(-90deg) translateZ(225px); }
.trans { opacity:0.7; }