.stage {
    width: 240px;
    height: 220px;
    -webkit-perspective: 1000px;
    -webkit-perspective-origin: 50% -250px;
    display: block;
    position: relative;
}

.cube {
    display: block;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(-40deg);
}

figure.side {
    display: block;
    position: absolute;
    background-color: #60c2ef;
    -webkit-transform-origin: 50% 50% 0;
    -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(60%, transparent), to(RGBA(0, 0, 0, 0.15)));
}

figure.front{
    width: 80px;
    height: 100px;
    -webkit-transform: translateZ(15px) translateX(40px);
    background-color: rgb(55, 145, 184);
}

figure.right{
    width: 30px;
    height: 100px;
    background-color: rgb(0, 65, 96);
     -webkit-transform: translateX(40px) rotateY(90deg) translateZ(65px);
}
figure.top{
    width: 80px;
    height: 30px;
    background-color: rgb(253, 217, 3);
    -webkit-transform: translateX(40px) rotateX(90deg) translateZ(15px);
}

figure.side:before, figure.side:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.1;
}
figure.side:before {
  background: -webkit-radial-gradient(top left, rgba(0, 0, 0, 0.5), #000000);
}

figure.side:after {
  background: -webkit-radial-gradient(top right, rgba(0, 0, 0, 0.8), #000000);
}

.cube:hover {
  -webkit-transform: rotateY(0deg);
  -webkit-transition: all 0.4s ease;
}
.cube:hover figure.right:before, .cube:hover figure.front:before, .cube:hover figure.top:before {
    -webkit-transition: all 0.4s ease;
    off-opacity: 0.02;
    background: -webkit-radial-gradient(bottom left, rgba(255, 255, 255, 0.5), #000000);
}
.cube {
  -webkit-transition: all 0.4s ease;
}
.cube figure.right:before, .cube figure.front:before, .cube figure.top:before {
  -webkit-transition: all 0.4s ease;
}