How would I rotate this text to face into the sphere?

Question

I've been experimenting with how to create a sphere from letters using CSS. This is the process I have so far.

1. Create 2D circle of text by incrementally rotating each character in the circle
2. Repeat this process for desired number of rings
3. Assemble the rings increasing each rings rotation to create an sphere

However I can't figure out how to then rotate the text in the rings 90 degrees so that they faces point towards the inside and outside of the sphere.

I've reduced the number of rings in the below snippet as it better indicates the problem I'm facing.

const ball = document.getElementsByClassName("ball")[0];
const alphabet = "abcdefghijklmnopqrstuvwxyz"

for (i = 0; i < 4; i++) {
  const ring = document.createElement("p");
  ring.classList.add("ring");
  ring.style.transform = `rotateY(${12 * i}deg)`;

  ring.style.color = '#'+(Math.random() * 0xFFFFFF << 0).toString(16).padStart(6, '0');

  for (j = 0; j < 60; j++) {
    const char = document.createElement("span");
    const node = document.createTextNode( alphabet[Math.floor(Math.random() * alphabet.length)]);
   
    char.appendChild(node);
    char.classList.add("char");
    char.style.transform = `rotate(${6 * j}deg)`; 
  
    ring.appendChild(char);
  }
  
  ball.appendChild(ring);
}

@keyframes roundandround {
  to {
    transform: rotateY(360deg);
  }
}

.char {
  height: 100px;
  position: absolute;
  width: 20px;
  left: 50%;
  top: 25%;
  transform-origin: bottom center;
  writing-mode: vertical-rl;
}

.inner {
  transform: rotateY(90deg);
  transform-style: preserve-3d;
}
body {
  background-color: #000000;
}
.scene {
  width: 600px;
  height: 600px;
  margin: 2% auto;
  perspective: 1000px;
}
.wrapper {
  width: 100%;
  height: 100%;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  transform-style: preserve-3d;
}

.ball {
  position: relative;
  width: 70%;
  height: 70%;
  margin: 0 auto;
  transform-style: preserve-3d;
  animation: roundandround 7.5s 1.3s infinite linear;
}
.ball .ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="scene">
  <div class="wrapper">
    <ul class="ball">
    </ul>
  </div>
</div>

Answer 1

Consider another span inside the one you made for text so you can rotate each letter like you want.

I used rotateX(90deg) but you can consider another value like rotateY(90deg) rotateX(90deg) to get another orientation:

const ball = document.getElementsByClassName("ball")[0];
const alphabet = "abcdefghijklmnopqrstuvwxyz"

for (i = 0; i < 4; i++) {
  const ring = document.createElement("p");
  ring.classList.add("ring");
  ring.style.transform = `rotateY(${12 * i}deg)`;

  ring.style.color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16).padStart(6, '0');

  for (j = 0; j < 60; j++) {
    const char = document.createElement("span");
    const text = document.createElement("span"); /* extra span */
    const node = document.createTextNode(alphabet[Math.floor(Math.random() * alphabet.length)]);

    text.appendChild(node);
    char.appendChild(text);
    char.classList.add("char");
    char.style.transform = `rotate(${6 * j}deg)`;

    ring.appendChild(char);
  }

  ball.appendChild(ring);
}

@keyframes roundandround {
  to {
    transform: rotateY(360deg);
  }
}

.char {
  height: 100px;
  position: absolute;
  width: 20px;
  left: 50%;
  top: 25%;
  transform-origin: bottom center;
  writing-mode: vertical-rl;
  transform-style: preserve-3d; /* dont forget this */
}

.inner {
  transform: rotateY(90deg);
  transform-style: preserve-3d; 
}

body {
  background-color: #000000;
}

.scene {
  width: 600px;
  height: 600px;
  margin: 2% auto;
  perspective: 1000px;
}

.wrapper {
  width: 100%;
  height: 100%;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  transform-style: preserve-3d;
}

.ball {
  position: relative;
  width: 70%;
  height: 70%;
  margin: 0 auto;
  transform-style: preserve-3d;
  animation: roundandround 7.5s 1.3s infinite linear;
}

.ball .ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; /* dont forget this */
}

/* extra CSS */
.char span {
  display: inline-block;
  transform: rotateX(90deg);
}
/**/

<div class="scene">
  <div class="wrapper">
    <ul class="ball">
    </ul>
  </div>
</div>