style.css

body {
    background-color: rgb(202, 199, 18);
}

#container {
    margin: 50px auto;
    width: 200px;
    height: 200px;
    perspective: 600px;
    padding: 95px;
}

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

#cube div {
    border: 1px solid #ccc;
    border-radius: 30px;
    width: 198px;
    height: 198px;
    position: absolute;
    background-image: url(https://1.bp.blogspot.com/-8oHADm0XlWY/UV72I6qYX_I/AAAAAAAAD8U/83sdKrWjjRg/s1600/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: translate(0, 70%) rotate(114deg)translateZ( -100px) rotateY( 13deg) rotate3d(1, 1, 1, 61deg) rotateX(342deg);
}

#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);
}

@-webkit-keyframes rotating {
    0% {
        -webkit-transform: rotate(0deg);
    }
    30% {
        -webkit-transform: rotate(70deg);
    }
    40% {
        -webkit-transform: rotate(100deg);
    }
    60% {
        -webkit-transform: rotate(140deg);
    }
    70% {
        -webkit-transform: rotate(230deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

.rotating {
    -webkit-animation: rotating 2s linear infinite;
}