.cube{position:absolute;left:50%;top:50%;width:0;height:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.cube.transition{-webkit-transition:.8s;transition:.8s}.surface{position:absolute;left:-40px;top:-40px;width:80px;height:80px;background:#000;border:1px solid #000;border-radius:10px;-webkit-box-sizing:border-box;box-sizing:border-box}.front{-webkit-transform:translateZ(40px);transform:translateZ(40px)}.right{-webkit-transform:rotateY(90deg) translateZ(40px);transform:rotateY(90deg) translateZ(40px)}.back{-webkit-transform:rotateY(180deg) translateZ(40px);transform:rotateY(180deg) translateZ(40px)}.left{-webkit-transform:rotateY(270deg) translateZ(40px);transform:rotateY(270deg) translateZ(40px)}.top{-webkit-transform:rotateX(90deg) translateZ(40px);transform:rotateX(90deg) translateZ(40px)}.bottom{-webkit-transform:rotateX(270deg) translateZ(40px);transform:rotateX(270deg) translateZ(40px)}#app{left:0;top:0;width:100%;height:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-perspective:2000px;perspective:2000px;-webkit-perspective-origin:-200px -200px;perspective-origin:-200px -200px}#app,.touch-box{position:absolute}.touch-box{left:50%;top:50%;width:240px;height:240px;-webkit-transform:translate3d(-50%,-50%,120px);transform:translate3d(-50%,-50%,120px)}.cell{width:80px;height:80px;float:left}