How to rotate the cube and have its sides expanded using css html?

i want to rotate the cube and its faces expanded. i have tried something like below,

.wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
 }
 .cube-wrap {
     width: 40px;
     height: 40px;
     -webkit-perspective: 2000px;
     -webkit-perspective-origin: 50% -500px;
 }
 .single-box {
     background-size: cover;
     display: block;
     position: absolute;
     width: 40px;
     height: 40px;
     background-color: #60c2ef;
    -webkit-transform: rotateY(45deg) translateZ(-200px) rotateX(15deg);
    -webkit-transform-origin: 50% 50% 0;            
 }
 .box {
     -webkit-transform-style: preserve-3d;
     -webkit-animation: rotate 1.5s infinite ease;
 }
 .side-front {
     animation: side-front-animation 3s ease infinite;
     animation-delay: 100ms;
     transform: rotateY(0deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: translateZ(20px);
 }
 .side-back {
     animation: side-back-animation 3s ease infinite;
     animation-delay: 100ms;
     transform: rotateY(-180deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     border: #ffffff;
     -webkit-transform: rotateY(180deg) translateZ(20px);
 }
 .side-top {
     animation: side-top-animation 3s ease infinite;
     animation-delay: 0;
     transform: rotateX(90deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: rotateX(90deg) translateZ(20px);
 }
 .side-bottom {
     animation: side-bottom-animation 3s ease infinite;
     animation-delay: 0;
     transform: rotateX(-90deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: rotateX(-90deg) translateZ(20px);
 }
 .side-left {
     animation: side-left-animation 3s ease infinite;
     animation-delay: 100ms;
     transform: rotateY(-90deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: rotateY(-90deg) translateZ(20px);
 }
 .side-right {
     animation: side-right-animation 3s ease infinite;
     animation-delay: 100ms;
     transform: rotateY(90deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: rotateY(90deg) translateZ(20px);
 }


 @-webkit-keyframes rotate {
     0% { -webkit-transform: rotateY(0); }
     100% { -webkit-transform: rotateY(360deg); }
 } 

 @-webkit-keyframes side-top-animation {
     0% { opacity: 1; transform: rotateX(90deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateX(90deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateX(90deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateX(90deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateX(90deg) translateZ(150px) }
 }

 @-webkit-keyframes side-bottom-animation {
     0% { opacity: 1; transform: rotateX(-90deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateX(-90deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateX(-90deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateX(-90deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateX(-90deg) translateZ(150px) }
 }

 @-webkit-keyframes side-front-animation {
     0% { opacity: 1; transform: rotateY(0deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateY(0deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateY(0deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateY(0deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateY(0deg) translateZ(150px) }
 } 
 @-webkit-keyframes side-back-animation {
     0% { opacity: 1; transform: rotateY(-180deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateY(-180deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateY(-180deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateY(-180deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateY(-180deg) translateZ(150px) }
 }

 @-webkit-keyframes side-left-animation {
     0% { opacity: 1; transform: rotateY(-90deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateY(-90deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateY(-90deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateY(-90deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateY(-90deg) translateZ(150px) }
 }
 @-webkit-keyframes side-right-animation {
     0% { opacity: 1; transform: rotateY(90deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateY(90deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateY(90deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateY(90deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateY(90deg) translateZ(150px) }
 }

 <div class="wrapper">
     <div class="cube-wrap">
         <div class="box">
             <div class="single-box side-back"></div>
             <div class="single-box side-top"></div>
             <div class="single-box side-bottom"></div>
             <div class="single-box side-left"></div>
             <div class="single-box side-right"></div>
             <div class="single-box side-front"></div>
        </div>
    </div>
</div>

The above code works. it rotates and spins but the faces are not close enough to look like a cube. how can i fix this.

could someone help me with this. thanks.

I am not knowing how to add the animations to the cube faces. and the cube should like in image below.