试试用CSS画一个简单的3d图形，比如掘金队的logo？与2d绘图相比，3d绘图需要注意哪些小细节？一起来看看1.Pyramid/Pyramid除了镂空的部分，整个形状其实就是一个金字塔，或者叫金字塔（Pyramid）一共有5个面，所以我们可以准备5个元素其中，bottom表示正方形bottom，剩下的4个代表边上的4个三角形。首先从立方体入手，注意需要呈现3D视觉，需要添加transform-style:preserve-3d，先画一个边juejin{--s:200px;位置：相对；宽度：var(--s)；高度：var（--s）；变换样式：保留3d；视角：3000px；变换：rotateX(calc(.3*-90deg))rotateY(calc(.1*90deg));}pane{position:absolute;插图：13.3%00；transform-origin:centerbottom;}pane[a]{背景色:#368dff;transform:translate3d(0,0,calc(var(--s)*-0.5));}effect同理绘制4边pane[b]{background-color:#368dff;转换：translate3d(0,0,calc(var(--s)*0.5));}pane[c]{background-color:#1e80ff;转换：translate3d(calc(var(--s)*-0.5),0,0)rotateY(90deg);}pane[d]{background-color:#1e80ff;transform:translate3d(calc(var(--s)*0.5),0,0)rotateY(90deg);}效果如下然后把4条边裁成三角形，用clip-pathpane就可以了{/**/clip-path:polygon(50%0,100%100%,0100%);}效果如下最后将4条边沿着底部旋转一定角度，合并到一起。既然大小一模一样，底部又是正方形的，倾斜的角度自然是一样的，这里就不通过数学计算了，直接用一个CSS变量实时比较juejin{/**/--度：35.3deg;}pane[a]{/**/transform:translate3d(0,0,calc(var(--s)*-0.5))rotateX(calc(var(--deg)*-1));}pane[b]{/**/transform:translate3d(0,0,calc(var(--s)*0.5))rotateX(var(--deg));}pane[c]{/**/transform:translate3d(calc(var(--s)*-0.5),0,0)rotateY(90deg)rotateX(calc(var(--deg)*-1));}pane[d]{/**/transform:translate3d(calc(var(--s)*0.5),0,0)rotateY(90deg)rotateX(var(--deg));}效果如下，所以得到一个金字塔/方金字塔形状.2.侧面挖空和断面处理之前已经得到一个完整的四角锥，现在需要先将侧面挖空这里有两种方式。首先，可以用透明和不透明的渐变填充，让透明的部分被挖空；还有一种方法，使用mask遮罩，也可以轻松实现pane{/**/-webkit-mask:linear-gradient(tobottom,red50%,transparent0)00/100%40%;}的效果如下，不过现在看起来还是一张纸，截掉的边需要封起来。我们再添加一个标签，用两个伪元素覆盖toptop{position:absolute;插图：0；背景颜色：#1677f7；变换：translate3d(0,calc(var(--s)*0.36),0)rotateX(90deg)scale(.8);变换样式：保留3d；box-shadow:inset00calc(var(--s)*0.3)rgb(255255255/45%);}top::before{内容：'';位置：绝对；插图：0；背景色：继承；变换：translate3d(0,0,calc(var(--s)*0.285))scale(.5);box-shadow:inherit;}当然这里我们需要在细节上做很多调整，保证横截面的大小和位置与bottomsectionbottom::before,bottom::after{content:'';位置：绝对；插图：0；背景色：继承；转换：translate3d(0,0,calc(var(--s)*0.285))scale(.595);盒子阴影：继承；}bottom::after{变换：translate3d(0,0,calc(var(--s)*0.568))scale(.195)}效果如下3.其他光影细节和鼠标跟随效果首先是底部投影，通过filter:blur,可以让整个场景更有空间感juejin::after{position:absolute;内容：'';宽度：var(--s)；高度：变量（--s）；顶部：80%；背景色：rgba(0,0,0,0.1)；变换：旋转X（90度）比例（1.2）；filter:blur(20px);}然后是section的高光处理，这里是通过内阴影来实现的，这样整体的光影看起来比较自然，就好像top上面有光一样{/**/box-shadow:inset00calc(var(--s)*0.3)rgb(255255255/45%);}最后鼠标跟随效果，这里是通过CSS变量实现的，相对位置mouse是通过JS获取，然后通过CSS变量传递，实时改变transform的旋转角度juejin{/**/transform:rotateX(calc((var(--y)-0.3)*-90deg))rotateY(calc((var(--x)-0.3)*90deg));}JS只听mousemovedocument.body.addEventListener('mousemove',function(ev){document.body.style.setProperty('--x',ev.clientX/document.body.offsetWidth)document.body.style.setProperty('--y',ev.clientY/document.body.offsetHeight)})这样得到文章的效果的完整代码如开头所示，您还可以查看以下任何内容g链接：CSS3djuejinlogo(runjs.work)CSS3djuejinlogo(codepen.io)4.总结总的来说，绘图制作这样的3D图形相对容易。总结一下加入transform-style:preserve-3d，整体呈现3D视觉掘金logo。呈金字塔形，或称四棱锥（方形金字塔）。,rotate3d等基础操作组合形成镂空部分，可以填充渐变，也可以mask来实现横截面。需要对细节进行调整，确保横截面的大小和位置恰到好处。为了让整个模型更加逼真，需要添加合理的高光和投影鼠标跟随效果，可以通过传递CSS变量来实现。当然，像这样的规则图形可以通过CSS轻松处理。如果有一些凹凸不平或曲面，就不容易做到，无法做到高光。真正要模拟的话，这里建议使用专业的图形处理库比如three.js。最后，如果您觉得还不错，对您有帮助，请点赞、收藏、转发???
