Fatal编程技术网
  • javascript/
  • Javascript 如何旋转此文本使其面向球体？

Javascript 如何旋转此文本使其面向球体？

javascript css

Javascript 如何旋转此文本使其面向球体？,javascript,css,css-transforms,Javascript,Css,Css Transforms,我一直在尝试如何使用CSS从字母创建一个球体。这就是我到目前为止的过程 通过增量旋转圆圈中的每个字符来创建二维文字圆圈 对所需数量的环重复此过程 组装环，增加每个环的旋转以创建球体 但是，我不知道如何将环中的文本旋转90度，使它们面向球体的内外 我在下面的代码片段中减少了环的数量，因为它更好地说明了我所面临的问题 constball=document.getElementsByClassName（“ball”）[0]； const alphabet=“abcdefghijklmnopqrstu

我一直在尝试如何使用CSS从字母创建一个球体。这就是我到目前为止的过程

  • 通过增量旋转圆圈中的每个字符来创建二维文字圆圈
  • 对所需数量的环重复此过程
  • 组装环，增加每个环的旋转以创建球体
    • 但是，我不知道如何将环中的文本旋转90度，使它们面向球体的内外

    我在下面的代码片段中减少了环的数量，因为它更好地说明了我所面临的问题

    constball=document.getElementsByClassName（“ball”）[0]；
const alphabet=“abcdefghijklmnopqrstuvxyz”
对于（i=0；i<4；i++）{
常量环=document.createElement（“p”）；
ring.classList.add（“ring”）；
ring.style.transform=`rotateY（${12*i}度）`；

    ring.style.color='#'+（Math.random（）*0xFFFFFF在为文本制作的跨距内考虑另一个跨距，以便可以根据需要旋转每个字母
    

    我使用<代码> RoTATEX（90DEG），但您可以考虑另一个值，如：代码> RoTATEY（90DEG）RoTATEX（90DEG）< /代码>以获得另一个方向：
    


    constball=document.getElementsByClassName（“ball”）[0]；
const alphabet=“abcdefghijklmnopqrstuvxyz”
对于（i=0；i<4；i++）{
常量环=document.createElement（“p”）；
ring.classList.add（“ring”）；
ring.style.transform=`rotateY（${12*i}度）`；
ring.style.color='#'+（Math.random（）*0xFFFFFF