#cube {
    position: relative;
    transform-style: preserve-3d;
    transition: transform .5s;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    margin-left: -14%;
}

#cube div {
    border: 1px solid #ccc;
    border-radius: 30px;
    width: 198px;
    height: 198px;
    position: absolute;
    background-image: url(./Dice.png);
    background-repeat: no-repeat;
    opacity: .75;
}

.front {
    transform: rotateY(0deg) translateZ(100px);
    background-position: -12px -12px;
}

.back {
    transform: rotateX(180deg) translateZ(100px);
    background-position: -463px -239px;
}

.right {
    transform: rotateY(90deg) translateZ(100px);
    background-position: -236px -12px;
}

.left {
    transform: rotateY(-90deg) translateZ(100px);
    background-position: -241px -235px;
}

.top {
    transform: rotateX(90deg) translateZ(100px);
    background-position: -459px -12px;
}

.bottom {
    transform: rotateX(-90deg) translateZ(100px);
    background-position: -12px -235px;
}

#cube.show1 {
    transform: translateZ(-100px) rotateY(0deg);
}

#cube.show2 {
    transform: translateZ(-100px) rotateX(-180deg);
}

#cube.show3 {
    transform: translateZ(-100px) rotateY(-90deg);
}

#cube.show4 {
    transform: translateZ(-100px) rotateY(90deg);
}

#cube.show5 {
    transform: translateZ(-100px) rotateX(-90deg);
}

#cube.show6 {
    transform: translateZ(-100px) rotateX(90deg);
}