body {
  background: #000;
}

.wrapper{
  height:500px;
  width:500px;
  position:absolute;
  top: 50%;
  left: 50%;
  margin: -250px;
  backface-visibility: hidden;
  background: none;
}

.box{
  height:98%;
  width:98%;
  background: rgba(255,0,255,0.03);
  position:absolute;
  top:50%;
  left:50%;
  margin: -44%;
  overflow: hidden;
  border-radius: 100%;
  box-sizing: border-box;
  backface-visibility: hidden;

  transform: translate3d(0,0,0) rotate3d(0,0,0,0deg);
  animation: rot 50000ms infinite linear;
  animation-delay: 1000ms;
  
  .box {
    box-shadow: -15px 15px 50px -5px rgba(255,255,255,0.3) inset;

  }
}



@keyframes rot {
    0% {
      transform:translate3d(0, 0, 0) rotate3d(0,0,1,0deg);

  }
  50% {
      transform:translate3d(50%, -50%, 0) rotate3d(0,0,1,180deg);

  }
  100% {
      transform:translate3d(0, 0, 0) rotate3d(0,0,1,360deg);

  }
}