body{background-color:#ddd}.top{position:absolute;left:50%;top:32px;transform:translate(-50%,0);perspective:1000px;width:330px;height:125px}.container{position:absolute;left:50%;top:185px;transform:translate(-50%,0);perspective:1000px;width:330px;height:375px}#cube{width:100%;height:100%;position:absolute;transform-style:preserve-3d}#cube figure{backface-visibility:hidden;margin:0;width:330px;height:375px;display:block;position:absolute}#cube .front{transform:rotateY(0deg) translateZ(187.5px)}#cube .left{transform:rotateY(-90deg) translateZ(165px) translateX(22.5px)}#cube .right{transform:rotateY(90deg) translateZ(170px) translateX(22.5px)}#cube{transform:translateZ(-165px)}#cube.show-front{transform:translateZ(-165px) rotateY(0deg)}#cube.show-left{transform:translateX(-22.5px) translateZ(-165px) rotateY(90deg)}#cube.show-right{transform:translateX(22.5px) translateZ(-165px) rotateY(-90deg)}#cube{transition:transform .4s}.mdl-card{width:330px;height:375px}.mdl-card__title .mdl-button--icon{height:28px;width:28px;min-width:28px}.mdl-textfield__label{color:rgba(0,0,0,0.5)}a:hover{cursor:pointer}