<div class="globe">
  <div class="view">
    <div class="plane main">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>
  </div>
</div>

.globe{
  position: relative;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 10px solid black;
  box-sizing: border-box;
  // display: inline-block;
  background: black;
  // margin: 200px;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
  margin: 120px 0 0 35%;;
}

.view {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  perspective: 700;
}

.plane {
  width: 120px;
  height: 120px;
  transform-style: preserve-3d;

  &.main {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: rotateX(60deg) rotateZ(-30deg);
    animation: rotate 20s infinite linear;

    .circle {
      width: 200px;
      height: 200px;
      position: absolute;
      transform-style: preserve-3d;
      border-radius: 100%;
      box-sizing: border-box;
      box-shadow: 0 0 60px crimson, inset 0 0 60px crimson;

      &:before,
      &:after {
        position: absolute;
        display: block;
        content: "";
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 9%;
        height: 9%;
        border-radius: 100%;
        background: crimson;
        box-sizing: border-box;
        box-shadow: 0 0 60px 2px crimson;
      }

      &:before {
        transform: translateZ(-140px);
      }

      &:after {
        transform: translateZ(140px);
      }

      &:nth-child(1) {
        transform: rotateZ(72deg) rotateX(63.435deg);
      }
      &:nth-child(2) {
        transform: rotateZ(144deg) rotateX(63.435deg);
      }
      &:nth-child(3) {
        transform: rotateZ(216deg) rotateX(63.435deg);
      }
      &:nth-child(4) {
        transform: rotateZ(288deg) rotateX(63.435deg);
      }
      &:nth-child(5) {
        transform: rotateZ(360deg) rotateX(63.435deg);
      }
    }
  }
}

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