时间戳

首页 > 解决方案 > 如何在css和js中创建一个带有向鼠标指针旋转的字符串的球体？

javascript - 如何在css和js中创建一个带有向鼠标指针旋转的字符串的球体？

问题描述

我想要的输出；

在此处输入图像描述

我想用名称制作一个球体，但不弯曲/弯曲名称。我还想让它沿鼠标指针的方向旋转。

如果我使用这个旋转属性，我的话就会弯曲。

@keyframes rotate {
 0% {
  transform: rotateY(0deg);
 }
 100% {
  transform: rotateY(360deg);
 }
}
.circ{
  border: none;
  height: 200px;
  width: 200px;
  position: absolute;
  border-radius: 50%;
  transform-style: preserve-3d;
  box-sizing: border-box;
}
#sphere{
 animation: rotate 6s linear infinite;
 transform-style: preserve-3d;
 width: 400px;
 height: 400px;
}
.circ:nth-child(1) {
 transform: rotateX(0deg);
}
.circ:nth-child(2) {
 transform: rotateX(30deg);
}
.circ:nth-child(3) {
 transform: rotateX(60deg);
}
.circ:nth-child(4) {
 transform: rotateX(90deg);
}
.circ:nth-child(5) {
 transform: rotateX(120deg);
}
.circ:nth-child(6) {
 transform: rotateX(150deg);
}
.circ:nth-child(7) {
 transform: rotateX(180deg);
}
.circ:nth-child(8) {
 transform: rotateX(210deg);
}
<div id="sphere">
  <div class="circ">aaaaa</div>
  <div class="circ">bbbbb</div>
  <div class="circ">ccccc</div>
  <div class="circ">ddddd</div>
  <div class="circ">eeeee</div>
  <div class="circ">ffffffff</div>
</div>

等等..

标签： javascripthtmlcsscss-animationscss-transitions

解决方案

TLDR：这很复杂。

基本上，您需要一个游戏引擎循环和一些高级可视化库，如 D3 或 Pixi.js。如果您只有几句话，您可能可以直接使用 css/html，但它可能会滞后这是我将采取的方法：

  1. 给每个单词一个相对于 3d 球体中心的坐标。
  2. 做一些数学运算，然后将球体朝向鼠标旋转。（您可能想要使用像 gl-matrix 这样的向量库。）
  3. 通过应用球体的旋转来更新每个单词的位置。
  4. 将相机镜头变换应用于每个单词的位置，或者仅按 z 距离缩放它们以获得透视效果。
  5. 使用您的库使用的任何技术渲染单词，例如精灵或矢量。

推荐阅读