SOURCE

<div class="bank">
  <div class="rotation">
    <div class="move">
      <div class="rotation-follow">
        <div class="bank-follow">
          <div class="ball"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="rotation">
    <div class="move">
      <div class="rotation-follow">
        <div class="bank-follow">
          <div class="ball"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="rotation">
    <div class="move">
      <div class="rotation-follow">
        <div class="bank-follow">
          <div class="ball"></div>
        </div>
      </div>
    </div>
  </div>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(ellipse at bottom, #fff 40%, #bbc);
  perspective: 600px;
}

.ball {
  position: relative;
  width: 100px;
  height: 100px;
  background: linear-gradient(0deg, rgb(40, 0, 100), rgb(100, 50, 250), rgb(100, 150, 250), rgb(150, 200, 250));
  border-radius: 100%;
  box-shadow: -20px -10px 40px rgba(60, 30, 150, 0.7) inset;
  
  &::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    width: 50px;
    height: 30px;
    background: rgba(200, 230, 255, 0.5);
    border-radius: 100%;
    filter: blur(10px);
  }
  
  &::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 90px;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 50%, rgba(200, 200, 250, 0.3), rgba(100, 100, 150, 0.5));
    border-radius: 100%;
  }
}

.bank {
  transform-style: preserve-3d;
  transform: rotateX(-25deg);
}

.bank-follow {
  transform-style: preserve-3d;
  transform: rotateX(25deg);
}

.move {
  transform-style: preserve-3d;
  transform: translateZ(200px);
}

.rotation {
  position: absolute;
  top: -50px;
  left: -50px;
  transform-style: preserve-3d;
  animation: rotationY 3000ms linear infinite;
}

.rotation:nth-child(2) {
  animation-delay: -300ms;
}

.rotation:nth-child(2) .rotation-follow {
  animation-delay: -300ms;
}

.rotation:nth-child(3) {
  animation-delay: -600ms;
}

.rotation:nth-child(3) .rotation-follow {
  animation-delay: -600ms;
}

.rotation-follow {
  transform-style: preserve-3d;
  animation: rotationY 3000ms linear infinite reverse;
}

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