#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;
      }