How to create a sphere with strings that rotates toward the mouse pointer in css and js?

Question

The output I want;

I want to make a sphere with names, but without curving/bending the names. I also want to make it spin in the direction of the mouse pointer.

If i use this rotate property, my words got curved.

@keyframes rotate {
 0% {
  transform: rotateY(0deg);
 }
 100% {
  transform: rotateY(360deg);
 }
}
.circ{
  border: none;
  height: 200px;
  width: 200px;
  position: absolute;
  border-radius: 50%;
  transform-style: preserve-3d;
  box-sizing: border-box;
}
#sphere{
 animation: rotate 6s linear infinite;
 transform-style: preserve-3d;
 width: 400px;
 height: 400px;
}
.circ:nth-child(1) {
 transform: rotateX(0deg);
}
.circ:nth-child(2) {
 transform: rotateX(30deg);
}
.circ:nth-child(3) {
 transform: rotateX(60deg);
}
.circ:nth-child(4) {
 transform: rotateX(90deg);
}
.circ:nth-child(5) {
 transform: rotateX(120deg);
}
.circ:nth-child(6) {
 transform: rotateX(150deg);
}
.circ:nth-child(7) {
 transform: rotateX(180deg);
}
.circ:nth-child(8) {
 transform: rotateX(210deg);
}

<div id="sphere">
  <div class="circ">aaaaa</div>
  <div class="circ">bbbbb</div>
  <div class="circ">ccccc</div>
  <div class="circ">ddddd</div>
  <div class="circ">eeeee</div>
  <div class="circ">ffffffff</div>
</div>

and so on..

Answer 1

TLDR: It's complicated.

Basically you want a game engine loop and some advanced visualization library like D3 or Pixi.js. You might could get away with straight css/html if you only have a few words, but it might be laggy Here's the approach I would take:

1. Give each word a coordinate in relation to the center of a 3d sphere.
2. Do some math and rotate your sphere towards the mouse. (You probably want to use a vector library like gl-matrix.)
3. Update each word's position by applying the sphere's rotation to it.
4. Apply camera lens transform to each word's location, or just scale them by z-distance to get a perspective effect.
5. Render words using whatever tech your library uses, like sprites or vectors.