直播短視訊原始碼，模糊實現視覺的 3D 效果的相關程式碼
實現一個文字的 3D 變換
首先，我們需要實現一個文字的 3D 變換，這個比較簡單。主要是藉助 transform-style: preserve-3d 和 perspective，以及讓文字繞 Y 軸進行旋轉即可。
簡單的程式碼如下：

<p>CSS3DEFFECT</p>

body {
perspective: 160vmin;
}

p {
font-size: 24vmin;
transform-style: preserve-3d;
animation: rotate 10s infinite ease-in-out
 
;
}

@keyframes rotate {
0% {
transform: rotateY(-45deg);
}
50% {
transform: rotateY(45deg);
}
100% {
transform: rotateY(-45deg);
}
}

這個效果已經有了初步的 3D 效果，但是僅僅是這樣，會覺得少了些什麼。接下來我們就需要補充一下模糊的效果，讓距離我們近的文字清晰，遠離我們的文字模糊。
但這樣就需要對每個文字進行精細化處理，上面的 HTML 結構無法做到對每一個文字的單獨處理，我們簡單改造一下結構：

<p>
<span>C</span>
<span>S</span>
<span>S</span>
<span>3
 
</span>
<span>D</span>
<span>E</span>
<span>F</span>
<span>F</span>
<span>E</span>
<span>C</span>
<span>T</span>
</p>

完整的程式碼大概是這樣：

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

$count: 
 
12;

body, html {
font-family: 'Lobster', cursive;
perspective: 160vmin;
overflow: hidden;
}

p {
margin: auto;
font-size: 24vmin;
transform-style: preserve-3d;
animation: rotate 10s infinite ease-in-out;

span {
text-shadow:
1px 1px 0 rgba(0, 0, 0, .9),
2px 2px 0 rgba(0, 0, 0, .7),
3px 3px 0 rgba(0, 0, 0, .5),
4px 4px 0 rgba(0, 0, 0, .3),
5px 5px 0 rgba(0, 0, 0, .1);

&:nth-child(-n+5) {
animation-delay: -5s;
}
}
}

@for $i from 1 to 7 {
span:nth-child(#{$i}),
span:nth-last-child(#{$i}) {
animation: filterBlur-#{$i} 10s infinite ease-in-out;
}

@keyframes filterBlur-#{$i} {
0% {
filter: blur(0px) contrast(5);
}
50% {
filter: blur(#{7 - $i}px) contrast(1);
}
100% {
filter: blur(0px) contrast(5);
}
}
}
@keyframes rotate {
0% {
transform: rotateY(-45deg);
}
50% {
transform: rotateY(45deg);
}
100% {
transform: rotateY(-45deg);
}
}

以上就是 直播短視訊原始碼，模糊實現視覺的 3D 效果的相關程式碼，更多內容歡迎關注之後的文章