*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

   
section {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transform: perspective(700px);
}

.box{
  position: absolute;
  transform-style: preserve-3d;
 
}
.box .cube{
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;  

  animation: animateCube 7s linear infinite;
}
 


@keyframes animateCube {
  0%{
    transform: rotateY(0deg);
  }  
 20%{
    transform: rotateY(-90deg);
  }
77%{
    transform: rotateY(180deg);
  }
  100%{
    transform: rotateY(-90deg);
  }
}
.box .cube div{
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  transform-style: preserve-3d;
}
.box .cube div span{
  position: absolute;    
  width: 100%;
  height: 100%;
  background: radial-gradient(#fb77ef, #fb6200, #c3300f);
  transform: rotateY(calc(90deg * var(--i))) translateZ(100px);
}
.box .cube .top{
 
  top:0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: #b22708;
  transform: rotateX(90deg) translateZ(100px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.box .cube .top::before{
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: #fb6200;
  filter: blur(50px);
  transform: translateZ(-400px);
  box-shadow: 0 0 120px rgba(251, 98, 0 , 0.2)
  0 0 177px rgba(251, 98, 0 , 0.4)
  0 0 277px rgba(251, 98, 0 , 0.6)
  0 0 377px rgba(251, 98, 0 , 0.8)
  0 0 477px rgba(251, 98, 0 , 1)
  ;
}