哇哦！一起来用css做个3D霓虹字

这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战

介绍

本期我们会通过一个案例，去展示如何用css做一个3D环境，又怎么去用鼠标控制这个3D环境的。当然这个案例名字就叫3D霓虹字自然少不了字体动画了，那么我们先康康效果呗~

看这就是我们的3D霓虹字，我们通过鼠标来改变其方向，当然我们也可以通过滚轮来改变他的远近。接下来，我们就要实现一下咯，出发~

正文

1.3D环境

<div class="app">
    <div class="warrper">
        <p>Mask</p>
    </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap");

.app {
    perspective: 1000px; 
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-image: repeating-linear-gradient(90deg, hsla(57,0%,42%,0.09) 0px, hsla(57,0%,42%,0.09) 1px,transparent 1px, transparent 60px),repeating-linear-gradient(0deg, hsla(57,0%,42%,0.09) 0px, hsla(57,0%,42%,0.09) 1px,transparent 1px, transparent 60px),repeating-linear-gradient(0deg, hsla(57,0%,42%,0.09) 0px, hsla(57,0%,42%,0.09) 1px,transparent 1px, transparent 10px),repeating-linear-gradient(90deg, hsla(57,0%,42%,0.09) 0px, hsla(57,0%,42%,0.09) 1px,transparent 1px, transparent 10px),linear-gradient(90deg, rgb(20,20,20),rgb(20,20,20));
}
    
.warrper{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -256px;
    margin-top: -256px;
    height: 512px;
    width: 512px;
    transform-style: preserve-3d;
    p{
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -1024px;
        width: 2048px;
        margin-top: -.5em;
        text-align: center;
        font-size: 148px;
        white-space: nowrap;
        font-weight: bold;
        text-shadow: none;
        text-transform: uppercase;
        line-height: 1em;
        color: rgb(255,255,255);
    }
}

• 利用repeating-linear-gradient创造了一个全屏的黑色网格背景。
• 在div.app用perspective设置了透视距离，其内部用transform-style设置preserve-3d。这里个就是css3做3D环境的核心属性，他可以让元素的子元素应位于 3D 空间中，这样我们就可以去使用z轴了来改变深度了。
• 为了美观文字p引入了一个英文字体，并且用绝对定位控制在屏幕中央，因为后面js操控3D所有的方法都是以屏幕中心为基准的。

2.霓虹动画

p{
    animation: 1s slidein infinite alternate;
}
@keyframes slidein {
    from {
        text-shadow: 1px -3px 5px rgb(80, 238, 238), 1px 3px 5px rgb(250, 53, 53),
            10px -10px 20px rgb(250, 53, 53);
    }

    to {
        text-shadow: -3px 0px 5px rgb(80, 238, 238), 3px 0px 5px rgb(250, 53, 53),
            -5px 5px 20px rgb(80, 238, 238);
    }
}

我们写了一个css3动画，让其text-shadow使用多重投影，选用了红色和青色不间断的改变造成霓虹灯效果。非常的简单，而且大家可以多了解一下text-shadow做多重投影，可以完成好多美观的字体效果。

3.鼠标控制3D环境

let app = document.querySelector(".app");
let warrper = document.querySelector('.warrper');
let d = 0;
let worldXAngle = 0;
let worldYAngle = 0;

app.style.perspective = 500;

function update() {
    warrper.style.transform = 'translateZ( ' + d + 'px ) rotateX( ' + worldXAngle + 'deg) rotateY( ' + worldYAngle + 'deg)';
}

window.addEventListener('mousewheel', onMouseWheel);
window.addEventListener('DOMMouseScroll', onMouseWheel);

window.addEventListener('mousemove', function (e) {
    worldYAngle = -(.5 - (e.clientX / window.innerWidth)) * 180;
    worldXAngle = (.5 - (e.clientY / window.innerHeight)) * 180;
    worldYAngle = Math.min(75,Math.max(worldYAngle,-75));
    worldXAngle = Math.min(75,Math.max(worldXAngle,-75));
    update();
});

function onMouseWheel(event) {
    event = event ? event : window.event;
    d = d - (event.detail ? event.detail * -5 : event.wheelDelta / 8);
    update();
}

这里我大致说明一下，我们控制css3D主要是通过改变div.warrper盛放字体盒子的rotate属性和translateZ来完成的。我们通过绑定mousemove鼠标移动事件，来根据屏幕的中心点来算出其实对应的旋转角度，这里有个小技巧我们控制数值区间可用通过嵌套Math.min和Math.max来做到，非常的清晰和简洁，这里我们只让他旋转正负75度，如果做字体叠加的话会出现3D字体，但是我们这里目前就写了一个，所以到正负90度的时候就会消失毕竟是相当于一张纸片。剩下的就是通过绑定onMouseWheel滚轮事件，监听他的数值，来改变translateZ，这样就会产生近大远小的透视效果，非常的容易。

好了大致值得讲解的就是这些了，在线演示。

结语

本期主要想给大家讲述用css如果做一个3D环境的，text-shadow多重投影动画，以及js怎么控制css的3D环境不知道大家有没有收获。当然这里漏了一点就是js绑定transform，perspective这些属性的时候其实也可以加一些浏览器前缀来保证兼容更多浏览器，我们这里只保证了谷歌浏览器的运行哦。

---

因为临时有事只剩2个小时时间，好在快到半夜十二点之前赶出来这篇文章和案例，确实有些唐突，如果有什么不恰当之处，还请谅解哦~