我将如何旋转此文本以面向球体？

Question

我一直在试验如何使用 CSS 从字母创建球体。这是我目前的流程。

通过逐渐旋转圆圈中的每个字符来创建二维文本圆圈
重复此过程以获得所需的响铃次数
Assemble 环增加每个环的旋转以创建一个球体

但是我不知道如何将环中的文本旋转 90 度，使它们面向球体的内部和外部。

我减少了以下代码段中的响铃次数，因为它更能说明我面临的问题。

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

考虑在您为文本创建的跨度内添加另一个跨度，以便您可以随意旋转每个字母。

我使用了 rotateX(90deg) 但你可以考虑另一个值，比如 rotateY(90deg) rotateX(90deg) 来获得另一个方向：

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>

我将如何旋转此文本以面向球体？

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

javascript

css

css-transforms