.cube-container {
  width: 190px;
  height: 190px;
  position: relative;
  margin: 100px auto;
  -webkit-perspective: 1000;
      perspective: 1000;
}

  #cube {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    -webkit-transform:  translateZ( -60px ) rotateY( 0deg ) rotateX( 0deg ) rotateZ( 0deg );
        transform:  translateZ( -60px ) rotateY( 0deg ) rotateX( 0deg ) rotateZ( 0deg );
    -webkit-transition: -webkit-transform 1s ease-in-out;
        transition: transform 1s ease-in-out;
  }

    #cube figure {
      width: 189px;
      height: 188px;
      display: block;
      position: absolute;
      background: url('blue.png') top center no-repeat;
      font-size:70px;
      line-height: 190px;
      font-family: sans-serif;
      text-align: center;
      text-shadow: #000 -1px -1px 0, #fff 1px 1px 0;
      color: #f1f1f1;
      -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
    }

    /* top 5 point */
    #cube .face01  { -webkit-transform: rotateY(  36deg ) rotateX( 53deg ) rotateZ(   0deg ) translateZ( 120px ); transform: rotateY(  36deg ) rotateX( 53deg ) rotateZ(   0deg ) translateZ( 120px ); }
    #cube .face06  { -webkit-transform: rotateY( 108deg ) rotateX( 53deg ) rotateZ( 240deg ) translateZ( 120px ); transform: rotateY( 108deg ) rotateX( 53deg ) rotateZ( 240deg ) translateZ( 120px ); }
    #cube .face08  { -webkit-transform: rotateY( 180deg ) rotateX( 53deg ) rotateZ( 240deg ) translateZ( 120px ); transform: rotateY( 180deg ) rotateX( 53deg ) rotateZ( 240deg ) translateZ( 120px ); }
    #cube .face04  { -webkit-transform: rotateY( 253deg ) rotateX( 53deg ) rotateZ( 120deg ) translateZ( 120px ); transform: rotateY( 253deg ) rotateX( 53deg ) rotateZ( 120deg ) translateZ( 120px ); }
    #cube .face10  { -webkit-transform: rotateY( 324deg ) rotateX( 53deg ) rotateZ(   0deg ) translateZ( 120px ); transform: rotateY( 324deg ) rotateX( 53deg ) rotateZ(   0deg ) translateZ( 120px ); }

    /* bottom 5 point */
    #cube .face18  { -webkit-transform: rotateY(   0deg ) rotateX( -53deg ) rotateZ(  60deg ) translateZ( 120px ); transform: rotateY(   0deg ) rotateX( -53deg ) rotateZ(  60deg ) translateZ( 120px ); }
    #cube .face16  { -webkit-transform: rotateY(  72deg ) rotateX( -53deg ) rotateZ(  60deg ) translateZ( 120px ); transform: rotateY(  72deg ) rotateX( -53deg ) rotateZ(  60deg ) translateZ( 120px ); }
    #cube .face11  { -webkit-transform: rotateY( 144deg ) rotateX( -53deg ) rotateZ( 180deg ) translateZ( 120px ); transform: rotateY( 144deg ) rotateX( -53deg ) rotateZ( 180deg ) translateZ( 120px ); }
    #cube .face20  { -webkit-transform: rotateY( 216deg ) rotateX( -53deg ) rotateZ( 180deg ) translateZ( 120px ); transform: rotateY( 216deg ) rotateX( -53deg ) rotateZ( 180deg ) translateZ( 120px ); }
    #cube .face14  { -webkit-transform: rotateY( 288deg ) rotateX( -53deg ) rotateZ(  60deg ) translateZ( 120px ); transform: rotateY( 288deg ) rotateX( -53deg ) rotateZ(  60deg ) translateZ( 120px ); }

    /* middle point down */
    #cube .face13  { -webkit-transform: rotateY(  36deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px ); transform: rotateY(  36deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px ); }
    #cube .face09  { -webkit-transform: rotateY( 108deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px ); transform: rotateY( 108deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px ); }
    #cube .face02  { -webkit-transform: rotateY( 180deg ) rotateX( 11deg ) rotateZ( 300deg ) translateZ( 120px ); transform: rotateY( 180deg ) rotateX( 11deg ) rotateZ( 300deg ) translateZ( 120px ); }
    #cube .face05  { -webkit-transform: rotateY( 253deg ) rotateX( 11deg ) rotateZ( 300deg ) translateZ( 120px ); transform: rotateY( 253deg ) rotateX( 11deg ) rotateZ( 300deg ) translateZ( 120px ); }
    #cube .face17  { -webkit-transform: rotateY( 324deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px ); transform: rotateY( 324deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px ); }

    /* middle point up */
    #cube .face12  { -webkit-transform: rotateY(   0deg ) rotateX( -11deg ) rotateZ( 120deg ) translateZ( 120px ); transform: rotateY(   0deg ) rotateX( -11deg ) rotateZ( 120deg ) translateZ( 120px ); }
    #cube .face19  { -webkit-transform: rotateY(  72deg ) rotateX( -11deg ) rotateZ(   0deg ) translateZ( 120px ); transform: rotateY(  72deg ) rotateX( -11deg ) rotateZ(   0deg ) translateZ( 120px ); }
    #cube .face03  { -webkit-transform: rotateY( 144deg ) rotateX( -11deg ) rotateZ(   0deg ) translateZ( 120px ); transform: rotateY( 144deg ) rotateX( -11deg ) rotateZ(   0deg ) translateZ( 120px ); }
    #cube .face07  { -webkit-transform: rotateY( 216deg ) rotateX( -11deg ) rotateZ(   0deg ) translateZ( 120px ); transform: rotateY( 216deg ) rotateX( -11deg ) rotateZ(   0deg ) translateZ( 120px ); }
    #cube .face15  { -webkit-transform: rotateY( 288deg ) rotateX( -11deg ) rotateZ( 120deg ) translateZ( 120px ); transform: rotateY( 288deg ) rotateX( -11deg ) rotateZ( 120deg ) translateZ( 120px ); }


  #cube.show-1   { -webkit-transform: translateZ( -60px ) rotateY(  -50deg ) rotateX(  -38deg ) rotateZ(   35deg ); transform: translateZ( -60px ) rotateY(  -50deg ) rotateX(  -38deg ) rotateZ(   35deg ); }
  #cube.show-2   { -webkit-transform: translateZ( -60px ) rotateY(  170deg ) rotateX(  5deg ) rotateZ(  -60deg ); transform: translateZ( -60px ) rotateY(  170deg ) rotateX(  5deg ) rotateZ(  -60deg ); }
  #cube.show-3   { -webkit-transform: translateZ( -60px ) rotateY( -144deg ) rotateX(   -8deg ) rotateZ(   -6deg ); transform: translateZ( -60px ) rotateY( -144deg ) rotateX(   -8deg ) rotateZ(   -6deg ); }
  #cube.show-4   { -webkit-transform: translateZ( -60px ) rotateY(   76deg ) rotateX(  135deg ) rotateZ(  -62deg ); transform: translateZ( -60px ) rotateY(   76deg ) rotateX(  135deg ) rotateZ(  -62deg ); }
  #cube.show-5   { -webkit-transform: translateZ( -60px ) rotateY(  118deg ) rotateX(  -53deg ) rotateZ(  -35deg ); transform: translateZ( -60px ) rotateY(  118deg ) rotateX(  -53deg ) rotateZ(  -35deg ); }
  #cube.show-6   { -webkit-transform: translateZ( -60px ) rotateY(  -75deg ) rotateX(  135deg ) rotateZ(   65deg ); transform: translateZ( -60px ) rotateY(  -75deg ) rotateX(  135deg ) rotateZ(   65deg ); }
  #cube.show-7   { -webkit-transform: translateZ( -60px ) rotateY(  -37deg ) rotateX(  187deg ) rotateZ(  185deg ); transform: translateZ( -60px ) rotateY(  -37deg ) rotateX(  187deg ) rotateZ(  185deg ); }
  #cube.show-8   { -webkit-transform: translateZ( -60px ) rotateY(  -50deg ) rotateX( -153deg ) rotateZ(   75deg ); transform: translateZ( -60px ) rotateY(  -50deg ) rotateX( -153deg ) rotateZ(   75deg ); }
  #cube.show-9   { -webkit-transform: translateZ( -60px ) rotateY(  -73deg ) rotateX( -175deg ) rotateZ(   15deg ); transform: translateZ( -60px ) rotateY(  -73deg ) rotateX( -175deg ) rotateZ(   15deg ); }
  #cube.show-10  { -webkit-transform: translateZ( -60px ) rotateY(   51deg ) rotateX(  -42deg ) rotateZ(  -41deg ); transform: translateZ( -60px ) rotateY(   51deg ) rotateX(  -42deg ) rotateZ(  -41deg ); }
  #cube.show-11  { -webkit-transform: translateZ( -60px ) rotateY(  -50deg ) rotateX( -220deg ) rotateZ(  -37deg ); transform: translateZ( -60px ) rotateY(  -50deg ) rotateX( -220deg ) rotateZ(  -37deg ); }
  #cube.show-12  { -webkit-transform: translateZ( -60px ) rotateY(  -10deg ) rotateX(   -4deg ) rotateZ( -120deg ); transform: translateZ( -60px ) rotateY(  -10deg ) rotateX(   -4deg ) rotateZ( -120deg ); }
  #cube.show-13  { -webkit-transform: translateZ( -60px ) rotateY(   35deg ) rotateX(  4deg ) rotateZ( -177deg ); transform: translateZ( -60px ) rotateY(   35deg ) rotateX(  4deg ) rotateZ( -177deg ); }
  #cube.show-14  { -webkit-transform: translateZ( -60px ) rotateY( -296deg ) rotateX(   72deg ) rotateZ(   30deg ); transform: translateZ( -60px ) rotateY( -296deg ) rotateX(   72deg ) rotateZ(   30deg ); }
  #cube.show-15  { -webkit-transform: translateZ( -60px ) rotateY( -238deg ) rotateX(  129deg ) rotateZ(   40deg ); transform: translateZ( -60px ) rotateY( -238deg ) rotateX(  129deg ) rotateZ(   40deg ); }
  #cube.show-16  { -webkit-transform: translateZ( -60px ) rotateY( -254deg ) rotateX( -136deg ) rotateZ(  113deg ); transform: translateZ( -60px ) rotateY( -254deg ) rotateX( -136deg ) rotateZ(  113deg ); }
  #cube.show-17  { -webkit-transform: translateZ( -60px ) rotateY(  -37deg ) rotateX(  8deg ) rotateZ(  175deg ); transform: translateZ( -60px ) rotateY(  -37deg ) rotateX(  8deg ) rotateZ(  175deg ); }
  #cube.show-18  { -webkit-transform: translateZ( -60px ) rotateY(  -50deg ) rotateX(   25deg ) rotateZ(  288deg ); transform: translateZ( -60px ) rotateY(  -50deg ) rotateX(   25deg ) rotateZ(  288deg ); }
  #cube.show-19  { -webkit-transform: translateZ( -60px ) rotateY(  -72deg ) rotateX(  4deg ) rotateZ(  352deg ); transform: translateZ( -60px ) rotateY(  -72deg ) rotateX(  4deg ) rotateZ(  352deg ); }
  #cube.show-20  { -webkit-transform: translateZ( -60px ) rotateY(   50deg ) rotateX( -220deg ) rotateZ(   38deg ); transform: translateZ( -60px ) rotateY(   50deg ) rotateX( -220deg ) rotateZ(   38deg ); }

.cube-container:after {
  content:"";
  display: block;
  position: relative;
  width: 380px;
  height: 380px;
  top: 70px;
  margin-left: -96px;
  background: -webkit-radial-gradient(center, ellipse, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 50%); /* W3C */
  -webkit-transform: scaleY(0.3);
      transform: scaleY(0.3);
}

#buttons {
  text-align: center;
  position: relative;
}

#buttons input[type="button"] {
  position: relative;
  width: 80px;
  border-width: 0;
  padding: 6px 16px;
  font-family: sans-serif;
  text-shadow: 1px 1px 1px rgb(255, 255, 255);
  font-size: 14px;
  border-radius:5px 5px 5px 5px;
  box-shadow:0px 0px 3px #000;
  background:gradient( linear, 50% 0%, 50% 100%, from( rgb(238, 238, 238) ), to( rgb(204, 204, 204) ) );
  background-clip: padding-box;
}

#buttons input[type="button"]:active {
  top: 1px;
  box-shadow:0px 0px 2px #000;
  background:gradient( linear, 50% 0%, 50% 100%, from( rgb(204, 204, 204) ), to( rgb(238, 238, 238) ) );
}

#outcome {
  text-align: center;
  position: relative;
  z-index: 9;
  top:-250px;
  opacity: 0;
  /* oooh I love pointer events for stuff like this */
  pointer-events: none;
  -webkit-transition: opacity 400ms;
      transition: opacity 400ms;
}

#outcome.show {
  opacity: 1;
}

#text {
  font-size: 40px;
  color: #fff;
  text-shadow: rgba( 0, 0, 0, 0.5 ) 1px 1px 0;
  background-color: rgba( 30, 30, 30, 0.8 );
  padding: 20px 30px;
  display: inline-block;
  border-radius: 10px;
  box-shadow: rgba( 0, 0, 0, 0.7 ) 1px 1px 1px;
}