如何解决我将如何旋转此文本以面向球体?
我一直在试验如何使用 CSS 从字母创建一个球体。这是我目前的流程。
- 通过逐步旋转圆圈中的每个字符来创建 2D 文本圆圈
- 重复此过程以获得所需的环数
- 组装环,增加每个环的旋转以创建一个球体
但是,我不知道如何将环中的文本旋转 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>
解决方法
在您为文本制作的范围内考虑另一个范围,以便您可以随意旋转每个字母。
我使用了 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。