SOURCE

<div id="machine">
  <div class="propeller">
    <div class="blade">
    </div>
    <div class="blade">
    </div>
    <div class="blade">
    </div>
    <div class="blade">
    </div>
    <div class="blade">
    </div>
    <div class="blade">
    </div>
    <div class="blade">
    </div>
    <div class="blade">
    </div>
    <div class="blade">
    </div>
    <div class="blade">
    </div>
  </div>
</div>

body {
  background: #eef;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 600px;
}

#machine {
  transform-style: preserve-3d;
  animation: pan 3000ms ease-in-out infinite alternate;
  .propeller {
    background: red;
    transform-style: preserve-3d;
    transform-origin: 0 20px;
    animation: rotate 3000ms linear infinite;
    .blade {
      position: absolute;
      width: 100px;
      height: 40px;
      background: linear-gradient(220deg, rgba(73, 155, 234, 1) 0%, rgba(32, 124, 229, 1) 100%);
      transform-origin: 0 50%;
      box-shadow: 0px 0px 20px 0 rgba(0, 0, 50, 0.2);
      transform-style: preserve-3d;
      border-radius: 0 100% 10px 0;
      @for $i from 0 through 10 {
        &:nth-child(#{$i + 1}) {
          transform: rotateZ($i * 36deg) rotateX(45deg) translateX(20px) translateY(-50%);
        }
      }
    }
  }
}

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

@keyframes pan {
  0% {
    transform: rotateY(-80deg);
  }
  100% {
    transform: rotateY(80deg);
  }
}