仅CSS三维旋转文本

我有一个有文字旋转的div。如何获得文本深度以提供更好的3d效果？为了澄清，在

90deg

处，文本变得

1px

厚，因为我们只能从侧面看到它-我如何使它变厚，例如

10px

厚？此外，应显示适当的深度-即在

0deg

时，我们看不到深度；在

45度时

我们可以看到

5px

的深度；在

90deg

处，我们可以看到完整的

10px

深度；等等

我想要的是CSS唯一的解决方案。

#微调器{
动画名称：微调器；
动画计时功能：线性；
动画迭代次数：无限；
动画持续时间：3s；
变换样式：保留-3d；
文本对齐：居中；
}
@关键帧微调器{
从{
变换：旋转（0度）；
}
到{
变换：旋转（-360度）；
}
}

---

住手，我头晕

我使用

：before

和

：after

元素添加了额外的文本层，并且我分别将它们的Y轴偏移了-3deg和3deg。结果是文本现在有了“某种”深度。如果我使用较短的字符串（例如“RPK”），我可以将偏移量增加到约7度，并且仍然具有OK外观。但是，这只会使外边缘具有额外的“深度”

#微调器{
动画名称：微调器；
动画计时功能：线性；
动画迭代次数：无限；
动画持续时间：3s；
变换样式：保留-3d；
文本对齐：居中；
字号：2em；
}
#微调器：之后，
#纺纱工：以前{
内容：“住手，我头晕！”；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
文本对齐：居中；
变换：旋转（2deg）；
}
#纺纱工：以前{
变换：rotateY（-2deg）；
}
#纺纱机，
#微调器：之后，
#纺纱工：以前{
字体大小：窄；
}
@关键帧微调器{
从{
变换：旋转（0度）；
}
到{
变换：旋转（-360度）；
}
}

---

住手，我头晕

纯CSS解决方案看起来不太好。要获得真正的3D效果，请使用JS。我建议使用

three.js

，因为它包含了一个相当容易使用的

textGeometry

函数

我编写了一个脚本，用类

rotatingText

替换元素的内容，并使用webGL场景替换元素中的文本，其中元素中的文本正在旋转

当然，你也可以用three.js做各种很酷的效果来制作你的文本。有关文本格式，请参见。有关更多详细信息，请查看

我在代码的注释中添加了一些注释

.rotatingText{
宽度：100%；
高度：200px；
}

住手，我头晕了！
函数rotateText（容器，i）{
var t=3；
var containerW=container.offsetWidth；
var containerH=container.offsetHeight；
var theText=container.innerHTML；//从元素中获取文本。。。
container.innerHTML=“；/”…并将其清除
var renderer=新的t.WebGLRenderer({
阿尔法：是的，
抗锯齿：真
});
设置大小（containerW，containerH）；
renderer.setClearColor（0x000000，0）；
container.appendChild（renderer.domeElement）；
var scene=新的t.scene（）；
var摄像机=新t透视摄像机(
75，//垂直视野
containerW/containerH，//长宽比
0.1，//近平面
1000//远平面
);
场景。添加（摄影机）；
摄像机位置设置（0,0,100）；
//这是您的3D文本：
var geometry=new t.TextGeometry（文本，{//在此处插入我们前面捕获的文本
大小：10，//您的字体大小
高度：1//字体深度
});
var材料=新的t.Meshlambert材料({
颜色：0x000000//您的字体颜色
});
var text=new t.Mesh（几何体、材质）；//这是您的3D文本对象
//我创建了一个轴对象作为旋转的中心点：
geometry.computeBoundingBox（）；
var textWidth=geometry.boundingBox.max.x-geometry.boundingBox.min.x；
text.position.set（-0.5*textWidth，0,0）；
场景。添加（文本）；
var pivot=new t.Object3D（）；
添加（文本）；
场景。添加（轴）；
//然后只渲染场景并请求新帧
this.render=函数（）{
pivot.rotation.y+=.02；//您希望文本每帧旋转多少
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
}
render（）；
}
var rotatingextelements=document.getElementsByClassName（“rotatingText”）；
对于（var i=0；i

添加原始元素的多个克隆，每个克隆后面都翻译了1px，然后对它们的颜色进行处理以提供3d外观并不是很糟糕

（仅在铬合金上测试）

---

HTML

<section>
<p >Stop, I'm getting dizzy!</p>
</section>

---

JS

section{
  animation-name: spinner;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 4s;
  transform-style: preserve-3d;
}


p {
  text-align: center;
  font-size: 2em;
  position:absolute;
  width:100%;
  letter-spacing: 0.2em;
}

@keyframes spinner {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}

$colors: #000,#111,#222,#333,#444,#555,#666,#777,#888,#999,#aaa,#bbb;

@for $i from 1 through length($colors) {
    p:nth-child( #{$i} ){
       transform: translateZ(- $i+px);
       color: (nth($colors, $i));

    }
}

var p = document.querySelector('p');

for(var i = 0 ; i<13 ; i++){
var node = document.createElement('p');
var child = "Stop, I'm getting dizzy!";
  child = document.createTextNode(child);
  node.appendChild(child);
p.parentNode.appendChild(node);
}

住手，我头晕了

住手，我头晕了

住手，我头晕了

住手，我头晕了

住手，我头晕了

住手，我头晕了

住手，我头晕了

住手，我头晕了

住手，我头晕了

住手，我头晕了

住手，我头晕了

住手，我头晕了

简单的

文本阴影

可以实现以下功能：

正文{
透视图：500px；
}
#纺纱机{
文本对齐：居中；
动画名称：旋转、深度；
动画计时功能：线性；
动画迭代次数：无限；
动画持续时间：3s；
}
@关键帧旋转{
从{变换：旋转（0度）；}
到{变换：旋转（-360度）；}
}
@关键帧深度{
0%{文本阴影：0 0黑色；}
25%{文本阴影：1px 0黑色，2px 0黑色，3px 0黑色，4px 0黑色，5px 0黑色；}
50%{文本阴影：0 0黑色；}
75%{文本阴影：-1px 0黑色，-2px 0黑色，-3px 0黑色，-4px 0黑色，-5px 0黑色；}
100%{文本阴影：