Intenté crear una esfera 3D usando solo CSS puro, pero no pude generar la forma requerida. He visto uncilindro pero no puedo encontrar ninguna referencia para crear un realesfera.

Mi código actual se ve así:

.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
}
.sphere {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  font-size: 500%;
  position: relative;
  box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
  display: inline-block;
  margin: 5%;
}
.sphere::after {
  background-color: rgba(255, 255, 255, 0.3);
  content: '';
  height: 45%;
  width: 12%;
  position: absolute;
  top: 4%;
  left: 15%;
  border-radius: 50%;
  transform: rotate(40deg);
}

<div class="sphere red"></div>
<div class="sphere green"></div>
<div class="sphere blue"></div>
<div class="sphere yellow"></div>
<div class="sphere"></div>

sin embargo,

R: estos son solo círculos 2D, no formas 3DB: No puedo rotarlos en 3d (quiero tener una imagen giratoria) similar a la de un globo terráqueo.

Lo siento si me perdí algo, pero no estoy muy seguro de dónde debería ir para preguntar esto.