Удивительный вращающийся шар на CSS

<div id="earth">
  <div class="mantle">
    <div class="ground">
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
    </div>
    <div class="ground">
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
      <div class="core"></div>
    </div>
  </div>
</div>

body {
  background: #000;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: 'Anton', sans-serif;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-perspective: 500px;
          perspective: 500px;
}

div {
  position: absolute;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#earth {
  -webkit-transform: rotateZ(-20deg) rotateX(10deg);
          transform: rotateZ(-20deg) rotateX(10deg);
}
#earth .mantle {
  -webkit-animation: rotate 10000ms linear infinite;
          animation: rotate 10000ms linear infinite;
}
#earth .ground:nth-child(1) {
  -webkit-transform: translate(-200px, -200px);
          transform: translate(-200px, -200px);
}
#earth .ground:nth-child(2) {
  -webkit-transform: rotateZ(90deg) translate(-200px, -200px);
          transform: rotateZ(90deg) translate(-200px, -200px);
}
#earth .core {
  width: 400px;
  height: 400px;
  background: rgba(255, 255, 200, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 100%;
  -webkit-box-shadow: 0 0 100px 0 rgba(255, 220, 200, 0.1);
          box-shadow: 0 0 100px 0 rgba(255, 220, 200, 0.1);
}
#earth .core::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 88%;
  height: 88%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
#earth .core::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  height: 40%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
#earth .core:nth-child(1) {
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
}
#earth .core:nth-child(2) {
  -webkit-transform: rotateX(10deg);
          transform: rotateX(10deg);
}
#earth .core:nth-child(3) {
  -webkit-transform: rotateX(20deg);
          transform: rotateX(20deg);
}
#earth .core:nth-child(4) {
  -webkit-transform: rotateX(30deg);
          transform: rotateX(30deg);
}
#earth .core:nth-child(5) {
  -webkit-transform: rotateX(40deg);
          transform: rotateX(40deg);
}
#earth .core:nth-child(6) {
  -webkit-transform: rotateX(50deg);
          transform: rotateX(50deg);
}
#earth .core:nth-child(7) {
  -webkit-transform: rotateX(60deg);
          transform: rotateX(60deg);
}
#earth .core:nth-child(8) {
  -webkit-transform: rotateX(70deg);
          transform: rotateX(70deg);
}
#earth .core:nth-child(9) {
  -webkit-transform: rotateX(80deg);
          transform: rotateX(80deg);
}
#earth .core:nth-child(10) {
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
}
#earth .core:nth-child(11) {
  -webkit-transform: rotateX(100deg);
          transform: rotateX(100deg);
}
#earth .core:nth-child(12) {
  -webkit-transform: rotateX(110deg);
          transform: rotateX(110deg);
}
#earth .core:nth-child(13) {
  -webkit-transform: rotateX(120deg);
          transform: rotateX(120deg);
}
#earth .core:nth-child(14) {
  -webkit-transform: rotateX(130deg);
          transform: rotateX(130deg);
}
#earth .core:nth-child(15) {
  -webkit-transform: rotateX(140deg);
          transform: rotateX(140deg);
}
#earth .core:nth-child(16) {
  -webkit-transform: rotateX(150deg);
          transform: rotateX(150deg);
}
#earth .core:nth-child(17) {
  -webkit-transform: rotateX(160deg);
          transform: rotateX(160deg);
}
#earth .core:nth-child(18) {
  -webkit-transform: rotateX(170deg);
          transform: rotateX(170deg);
}

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

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