CSSで球体を作る。

実際の動作を確認したい人向け
https://jsfiddle.net/junya_5102/5263raz1/1/

html

<div class="sphere">
  <div class="circle">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="circle">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="circle">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="circle">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="circle">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="circle">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

CSS

body{
  background-color: black;
}

.sphere{
  position: fixed;
  top: 50%;
  left: 50%;

  width: 1px;
  height: 1px;

  transform-style: preserve-3d;
}

.circle{
  position: absolute;
  top: 50%;
  left: 50%;

  width: 1px;
  height: 1px;

  transform-style: preserve-3d;
}

/* 'rotateX'の代わりに 'rotateY'を使用しても可能 */
.circle:nth-of-type(1){  transform: translate(-50%,-50%) rotateX(0deg);   color: red;}
.circle:nth-of-type(2){  transform: translate(-50%,-50%) rotateX(30deg);  color: red;}
.circle:nth-of-type(3){  transform: translate(-50%,-50%) rotateX(60deg);  color: blue;}
.circle:nth-of-type(4){  transform: translate(-50%,-50%) rotateX(90deg);  color: blue;}
.circle:nth-of-type(5){  transform: translate(-50%,-50%) rotateX(120deg); color: green;}
.circle:nth-of-type(6){  transform: translate(-50%,-50%) rotateX(150deg); color: green;}


.circle span{
  position: absolute;
  top: 50%;
  left: 50%;

  display: block;
  width: 60px;
  height: 60px;
  border: 2px solid currentColor;

  box-sizing: border-box;

  /* 球体内が見えなくなる */
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* translateY == 半径   */
span:nth-child(1){  transform: translate(-50%,-50%) rotate(0deg)   translateY(-150px) rotateX(90deg); }
span:nth-child(2){  transform: translate(-50%,-50%) rotate(30deg)  translateY(-150px) rotateX(90deg); }
span:nth-child(3){  transform: translate(-50%,-50%) rotate(60deg)  translateY(-150px) rotateX(90deg); }
span:nth-child(4){  transform: translate(-50%,-50%) rotate(90deg)  translateY(-150px) rotateX(90deg); }
span:nth-child(5){  transform: translate(-50%,-50%) rotate(120deg) translateY(-150px) rotateX(90deg); }
span:nth-child(6){  transform: translate(-50%,-50%) rotate(150deg) translateY(-150px) rotateX(90deg); }
span:nth-child(7){  transform: translate(-50%,-50%) rotate(180deg) translateY(-150px) rotateX(90deg); }
span:nth-child(8){  transform: translate(-50%,-50%) rotate(210deg) translateY(-150px) rotateX(90deg); }
span:nth-child(9){  transform: translate(-50%,-50%) rotate(240deg) translateY(-150px) rotateX(90deg); }
span:nth-child(10){ transform: translate(-50%,-50%) rotate(270deg) translateY(-150px) rotateX(90deg); }
span:nth-child(11){ transform: translate(-50%,-50%) rotate(300deg) translateY(-150px) rotateX(90deg); }
span:nth-child(12){ transform: translate(-50%,-50%) rotate(330deg) translateY(-150px) rotateX(90deg); }

/* アニメーション */
.sphere{
  animation: spin 6s linear infinite;
}

@keyframes spin{
  from{
    transform: translate(-50%,-50%) rotateX(90deg) rotateZ(0);
  }
  to{
    transform: translate(-50%,-50%) rotateX(450deg) rotateZ(360deg);
  }
}

ディスコとかで見かけるアレ

.circle span{
  position: absolute;
  top: 50%;
  left: 50%;

  display: block;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  background-color: currentColor;

  /* 球体内が見えなくなる */
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

解説

以前投稿した3dな円を6つ使って球体を表現しています。

3dな円を 複数個用意して それを徐々に倒せば作れます
倒すには rotateX()を指定します。※rotateYでも可能

.circle:nth-of-type(n){  transform: translate(-50%,-50%) rotateX(??deg); }

倒す角度は 0 ~ 150deg の範囲で
sampleでは 円が6個あるので 0, 30,60,90,120,150(deg)と30degずつ増やして指定
個数に合わせて調整してください。