#playfield {
    -webkit-perspective: 800;
    -webkit-perspective-origin: 50% 240px;
    background: transparent;
    margin: 0px;
    padding: 0px;
}
#focus {
    background: transparent;
    top: 0px;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translateZ(-240px);
}
#cube {
    top: 0px;
    position: relative;
    margin: 0 auto;
    height: 480px;
    width: 480px;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -webkit-transform-style: preserve-3d;
    /*-webkit-transform: translateZ(-250px);*/
}
.face {
    position: absolute;
    height: 478px;
    width: 478px;
    padding: 0px;
    border: 1px solid #7f7f7f;
    background: #fff;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}
#cube .one  {
    -webkit-transform: rotateX(90deg) translateZ(240px);
}
#cube .two {
    -webkit-transform: translateZ(240px);
}
#cube .three {
    -webkit-transform: rotateY(90deg) translateZ(240px);
}
#cube .four {
    -webkit-transform: rotateY(-90deg) translateZ(240px);
}
#cube .five {
    -webkit-transform: rotateY(180deg) translateZ(240px);
}
#cube .six {
    -webkit-transform: rotateX(-90deg) translateZ(240px) rotate(180deg);
}

#cube.show-1 {
    -webkit-transform: rotateX(-90deg);
}
#cube.show-2 {
    -webkit-transform: rotateY(0deg) rotate(0deg);
}
#cube.show-3 {
    -webkit-transform: rotateY(-90deg);
}
#cube.show-4 {
    -webkit-transform: rotateY(90deg);
}
#cube.show-5 {
    -webkit-transform: rotateY(-180deg);
}
#cube.show-6 {
    -webkit-transform: rotateX(-90deg) rotate(-180deg); 
}