:root{
    --deft:100px;
}
.wrapper{
  
    perspective:1000px;
}
.cube-box{
    width: 200px;
    height: 200px;
    margin: auto;
    transform-style:preserve-3d;
    margin-top: -50px;

}

.cube-box img{
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0.7;
  transition: 0.5s;
  object-fit: cover;
  background: linear-gradient(to left, blue,white);
  box-shadow: 1px 1px 15px 16px lightblue;
  margin-top: -50px;
}


.cube-box img:nth-child(1){
    transform: rotateY(0deg) translateZ(var(--deft));
}

.cube-box img:nth-child(2){
    transform: rotateY(90deg) translateZ(var(--deft));
}

.cube-box img:nth-child(3){
    transform: rotateY(180deg) translateZ(var(--deft));
}

.cube-box img:nth-child(4){
    transform: rotateY(-90deg) translateZ(var(--deft));
}

.cube-box img:nth-child(5){
    transform: rotateX(90deg) translateZ(var(--deft));
}

.cube-box img:nth-child(6){
    transform: rotateX(-90deg) translateZ(var(--deft));
}

.cube-box{
    animation: loops 10s linear infinite;
}

.cube-box:hover{
    --deft:200px;
    animation-play-state: paused;
}

@keyframes loops{
    0%{ transform: rotateX(0deg) rotateY(0deg); }
    100%{ transform: rotateX(360deg) rotateY(360deg); }
}