如何在javascript中沿Y轴旋转文本？

Question

我正在努力实现以下效果：

enter image description here

Google 仅提供了有关如何使用

rotate()

沿 Z 轴旋转文本的教程。

有人知道该怎么做吗？

谢谢！

Answer 1

这是基本的 ctx.transform 逻辑，我不想让你厌烦，但这里是解释，在线性代数（不是线性绘图）中有一种叫做矩阵的东西，3d 的旋转矩阵是 (cos(rotation) , 0, sin(rotation), 1))，现在根据您的需要将其放入代码中，然后输入所有文本

ctx.transform(Math.cos(旋转角度), 0, 0, 1, 0, 0);

如果您需要其他帮助，请在下面评论。

Answer 2

<!DOCTYPE html>
<html>
<head>
  <title>Rotate Text</title>
  <style>
    .rotate {
      display: inline-block;
      font-size: 24px;
      transform-origin: 0 0;
    }
  </style>
</head>
<body>
  <div id="text" class="rotate">TEI-C.ORG</div>

  <script>
    const textElement = document.getElementById('text');
    let rotation = 0;

    function rotateText() {
      rotation += 1;
      textElement.style.transform = `rotateZ(${rotation}deg)`;

      requestAnimationFrame(rotateText);
    }

    rotateText();
  </script>
</body>
</html>

如何在javascript中沿Y轴旋转文本？

问题描述投票：0回答：2

2个回答

最新问题

如何在javascript中沿Y轴旋转文本？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2