JSFiddle - React, Tailwind, and code Playground

by Brodingo

HTML

<div class="discs">
<div id="disc1" class="disc-box">
    <div class="disc">
        <div class="disc"></div>
    </div>
</div>

<div id="disc2" class="disc-box">
    <div class="disc">
        <div class="disc"></div>
    </div>
</div>

<div id="disc3" class="disc-box">
    <div class="disc">
        <div class="disc"></div>
    </div>
</div>
</div>

CSS

body {
    background-color: #333;
    padding: 200px 40px;
}

body * {
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
}

.discs {
    -webkit-filter: drop-shadow(0 0 10px black);
}

.disc-box {
    position: absolute;
    width:200px;
    height:200px;
    top: 50%;
    left: 50%;
    margin: -100px;
    perspective: 600px;
    transform: translateX(-50%);
}

.disc {
    width:200px;
    height:200px;
    margin: -20px -20px 0;
    border-radius: 50%;
    border-width: 20px 20px 0;
    border-style: solid;
    border-color: #009ED3;
}

#disc1 {
    transform: rotateY(70deg) rotateX(20deg);
    -webkit-animation-delay: 1.33s;
    animation-delay: 1.33s;
}

#disc2 {
    transform: rotateX(70deg)  rotateY(-30deg);
    -webkit-animation-delay: .66s;
    animation-delay: .66s;

}

#disc3 {
     transform:rotate3d(80, 10, 20, 75deg);
}


.disc-box > .disc {
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}

.disc .disc {
    border-color: #008AC7;
    transform: rotateX(8deg) scale(.8) translateY(-20px) translateZ(5px);
    transform-origin: 50% 100%;
}

@-webkit-keyframes spin {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(359deg);
  }
}
@keyframes spin {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(359deg);
  }
}