一篇文章带你用 CSS 绘制一个3D掘金 logo

尝试一下用 CSS 绘制简单的 3d 图形，比如一个掘金 logo？,,相比 2d 绘制，3d 有哪些需要注意的小细节呢？一起看看吧,除去挖空部分，整个外形其实是一个金字塔形，或者叫四棱锥形（四角锥）。,,一共有5个面，所以我们可以准备5个元素。,其中，bottom表示底部的正方形，其余4个表示侧面4个三角形。,首先先从正方体开始。,注意，需要呈现 3d 视觉，需要添加transform-style: preserve-3d，先绘制一个侧面。,效果如下：,,用同样的方式，绘制出4个侧面。,效果如下：,,然后，将4个侧面裁剪成三角形，用clip-path就行了。,效果如下：,,最后，将4个侧面沿着底部旋转一个角度，使其合并在一起，由于大小完全一样，底部又是正方形，倾斜角度自然也相同，这里就不通过数学计算了，直接用一个 CSS 变量去实时比对。,效果如下：,,这样就得到了一个金字塔形/四棱锥形。,,前面得到了一个完整的四棱锥，现在需要先将侧面镂空。,这里有两种方式，第一，可以用透明和不透明的渐变填充，这样透明的部分就是镂空的了；还有一种方式，用​​mask​​遮罩，也能轻易的实现。,效果如下：,,但是现在还是看着像纸片一样，需要将截断的几个面都封起来，我们再加一个标签，用两个伪元素将顶部覆盖。,当然，这里需要多多调整一下细节，确保横截面的大小和位置刚好吻合。,,同样还有底部的截面。,效果如下：,,首先是底部的投影，这是通过​​filter: blur​​实现的，可以让整个场景更具空间感。,,然后是截面的高光处理，这里是通过内阴影实现的，让整体光影看着更加自然，就像上方有光线一样,,最后是鼠标跟随效果，这里是通过 CSS 变量实现的，通过 JS 获取鼠标的相对位置，然后通过 CSS 变量 传递，实时改变 transform 的旋转角度。,JS 监听mousemove就可以了。,这样就得到了文章开头所示效果：,,总的来说，绘制这样一个的 3d 图形还是比较轻松的，下面总结一下,当然，像这种比较规则的图形还能简单通过CSS应付一下，如果有一些不规则的，或者有曲面，那就不太好实现了，而且高光也无法真正模拟出来，像这种情况还是建议通过three.js这样专业的图形处理库才行。