我有一个div与一些文本旋转。如何使文字深度得到更好的3D效果？为了澄清，在90度，文本变得1px厚，因为我们只能看到它从一边 – 我如何做，例如，10px厚？此外，应该显示适当的深度 – 即在0度，我们看不到深度;在45度，我们看到5px的深度;在90度，我们看到完整的10px深度;等等
我只是一个CSS唯一的解决方案。
#spinner {
animation-name: spinner;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 3s;
transform-style: preserve-3d;
text-align:center;
}
@keyframes spinner {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(-360deg);
}
}
<p id="spinner">Stop,I'm getting dizzy!</p>
解决方法
简单的文字阴影可以做到这一点：
body {
perspective: 500px;
}
#spinner {
text-align: center;
animation-name: spin,depth;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 3s;
}
@keyframes spin {
from { transform: rotateY(0deg); }
to { transform: rotateY(-360deg); }
}
@keyframes depth {
0% { text-shadow: 0 0 black; }
25% { text-shadow: 1px 0 black,2px 0 black,3px 0 black,4px 0 black,5px 0 black; }
50% { text-shadow: 0 0 black; }
75% { text-shadow: -1px 0 black,-2px 0 black,-3px 0 black,-4px 0 black,-5px 0 black; }
100% { text-shadow: 0 0 black; }
}
<p id="spinner">Stop,I'm getting dizzy!</p>
另一个改进可能是使用:: before和:: after伪类来克隆文本：
body {
perspective: 1000px;
}
#spinner {
font-size: 50px;
text-align: center;
animation-name: spin,depth;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 3s;
transform-style: preserve-3d;
position: relative;
}
#spinner::before,#spinner::after {
content: "Stop,I'm getting dizzy!";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
transform: rotateY(0.5deg);
transform-origin: 0 50%;
}
#spinner::after {
transform: rotateY(-0.5deg);
transform-origin: 100% 50%;
}
@keyframes spin {
from { transform: rotateY(0deg); }
to { transform: rotateY(-360deg); }
}
@keyframes depth {
0% { text-shadow: 0 0 black; }
25% { text-shadow: 1px 0 black,5px 0 black,6px 0 black; }
50% { text-shadow: 0 0 black; }
75% { text-shadow: -1px 0 black,-5px 0 black,-6px 0 black; }
100% { text-shadow: 0 0 black; }
}
<p id="spinner">Stop,I'm getting dizzy!</p>
