JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<div class="scene">
 <div class="container">
      <!-- X Axis -->
      <div class="circle border"></div>
      <div class="circle border"></div>
      <div class="circle border"></div>
      <div class="circle border"></div>
      <div class="circle border"></div>
      <!-- Y Axis -->
      <div class="circle border"></div>
      <div class="circle border"></div>
      <div class="circle border"></div>
      <div class="circle border"></div>
      <div class="circle border"></div>
      <!-- Z Axis -->
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
</div>
</div>

CSS

/* Rotate Sphere animation */
@-webkit-keyframes animateSphere {
  0% { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); }
  50% { transform: rotateY(360deg) rotateX(360deg) rotateZ(0deg); }
  100% { transform: rotateY(720deg) rotateX(720deg) rotateZ(360deg); }
}

iframe>body {
  background:transparent;
}

html {
  background: black;
}

.scene {
  perspective: 70px;
  width:50px;
  position:absolute;
  left:0;
  bottom:0;
}
.container {
  position: relative;
  width: 50px;
  height: 50px;
  transform-style: preserve-3d;
  animation-name: animateSphere; 
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.border {
  border: 1px solid #00a8ff;
}
.circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: none;
}
/* X Axis */
.circle:nth-child(1) {transform: rotate3d(1, 0, 0, 0deg);}
.circle:nth-child(2) {transform: rotate3d(1, 0, 0, 36deg);}
.circle:nth-child(3) {transform: rotate3d(1, 0, 0, 72deg);}
.circle:nth-child(4) {transform: rotate3d(1, 0, 0, 108deg);}
.circle:nth-child(5) {transform: rotate3d(1, 0, 0, 144deg);}
/* Y Axis */
.circle:nth-child(6) {transform: rotate3d(0, 1, 0, 0deg);}
.circle:nth-child(7) {transform: rotate3d(0, 1, 0, 36deg);}
.circle:nth-child(8) {transform: rotate3d(0, 1, 0, 72deg);}
.circle:nth-child(9) {transform: rotate3d(0, 1, 0, 108deg);}
.circle:nth-child(10) {transform: rotate3d(0, 1,0, 144deg);}
/* Z Axis */
.circle:nth-child(11) {transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 0deg);}
.circle:nth-child(12) {transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 36deg);}
.circle:nth-child(13) {transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 72deg);}
.circle:nth-child(14) {transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 108deg);}
.circle:nth-child(15) {transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 144deg);}