Ich habe versucht, eine 3D-Kugel mit reinem CSS zu erstellen, konnte jedoch die erforderliche Form nicht generieren. Ich habe ein @ gesehZylinde aber ich kann keinen Verweis zum Erstellen eines tatsächlichen @ findKuge.

ein aktueller Code sieht so aus:

.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>

jedoch

A: Dies sind nur 2D-Kreise, keine 3D-FormenB: Ich kann diese nicht in 3D drehen (ich möchte ein sich drehendes Bild haben), das dem eines Globus ähnelt.

Tut mir leid, wenn ich etwas verpasst habe, aber ich bin mir nicht sicher, wohin ich gehen soll, um das zu fragen.