--- theme: scrolls-light --- 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第28天，[点击查看活动详情](https://juejin.cn/post/7147654075599978532 "https://juejin.cn/post/7147654075599978532") # 前言最近在掘金刷文时，看到了一个 3D 菜单，于是突发奇想，能不能自己做个 3D 按钮，说干就干，花了一下午的时间实现了效果并整理了实现的过程，分享给大家。 # 思路分析接下来我们一步一步的分析 3D 按钮的实现过程。 ## 绘制 2D 按钮一下子就上强度恐怕有点强人所难了，因此我们先从绘制一个 2D 按钮开始。由于我们要绘制 4 个按钮，为了利于排版，这里我用了 `ul` 实现。 ```js

``` 按钮本身是有文字 + Icon 的，Icon 我们可以去 **iconfont** 中获取，然后下载 zip 包解压，将其中的 **iconfont.css** 以及 **iconfont.ttf** 这两个文件放入我们的项目中，通过 `link` 标签来引入外部资源。 ```js ``` 2D 按钮就是一个矩形，相信大家都会，这里需要注意的是，由于使用了 `li` 标签，因此我们需要将 `li` 的 `list-style` 设置为 `none`，否则会有小圆点。 ```js ul { display: flex; justify-content: center; align-items: center; } ul li { list-style: none; margin: 0 25px; } ``` 我们看看此时的效果： ![微信截图_20221025180630.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e36c985b28a4f60b2fda89c5d5d647e~tplv-k3u1fbpfcp-watermark.image?) 2D 还是相对容易实现的，接下来我们看看 3D 按钮的实现原理。 ## 3D 按钮我们仔细观察可以发现，3D 按钮和 2D 按钮的区别，仅仅在于 **能否看到另外的两面** 。也就是说，我们将 2D 按钮加上两个面，是不是从视觉效果上来看，就是 3D 按钮了呢？有的小伙伴会说：道理我都懂啊，那怎么加上这两个面呢？我矩形怎么才能变成平行四边形啊？这我们就要借助一个新的属性 —— `skew` 。我们看看 MDN 对这个属性的描述： > `skew` 定义了一个元素在二维平面上的倾斜转换。什么意思呢？实际上它就是在水平和垂直方向上将图形的每个点扭曲一定的角度。对于水平方向，我们可以借助 `skewX` 实现，对于垂直方向，我们可以借助 `skewY` 实现。我们先来尝试加上左边的面吧。 ### 左边的面 ![微信截图_20221025181502.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b44e77439f149c2ba5006b39bd0f5e4~tplv-k3u1fbpfcp-watermark.image?) 左边的面是一个高大于宽的平行四边形，我们先绘制一个矩形可以吧。这里我们使用伪元素 `::before` 进行左面的绘制。 ![微信截图_20221025181632.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f46e36c674654fc0a66e79063e5c8e41~tplv-k3u1fbpfcp-watermark.image?) 这里没啥问题，为了让侧面更立体一些，我们可以将侧面颜色调暗，做一个阴面的效果。 ![微信截图_20221025181746.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/abd63c70e8e948b1aa7fa40427ef646a~tplv-k3u1fbpfcp-watermark.image?) 有点意思了。接下来我们要让它往上“扯”一点，刚刚我们了解到，如果要对垂直方向“扯”，要用到 `skewY` 函数了。这里我们要 **垂直 45deg** 的角度来扯。 ```js ul li a::before { content: ""; position: absolute; top: 8px; left: -16px; height: 100%; width: 16px; background-color: #cecece; transition: 0.5s; transform: skewY(-45deg); } ``` ![微信截图_20221025181958.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/85cc6ed75a3f4f839338b329a0f4ca1b~tplv-k3u1fbpfcp-watermark.image?) 嗯嗯，美的很。 ### 另一面实际上另一面的原理也是一样的，这里就不再赘述了，我们看看效果图： ![微信截图_20221025182055.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/be9cad69e1ea4fd3a2c3982bce5330c4~tplv-k3u1fbpfcp-watermark.image?) ## Hover 悬浮态接下来我们要做一个悬浮效果，让按钮更生动一些。这里我们要用 `tranform` 中的 `translate` 函数了，它可以让我们的元素进行横向或者纵向的位移，位移的同时我们给它加点阴影，就像是按钮向上升了一样。 `translate` 函数可以接收两个参数，分别是 X 轴偏移的距离，以及 Y 轴偏移的距离。 ```js ul li:hover a { background-color: #dd4b39; transform: translate(15px, -15px); box-shadow: -50px 50px 50px rgba(0, 0, 0, 0.5); } ``` 我们看看最终效果： ![20221025_182427.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec7498b68f6a4ec489d18e8acfbcbdca~tplv-k3u1fbpfcp-watermark.image?) # Github 源码地址关于本文的所有代码及素材，都已上传至 Github 仓库，小伙伴们有需要的自取： [juejin-demo/3d-button-demo at main · catwatermelon/juejin-demo (github.com)](https://github.com/catwatermelon/juejin-demo/tree/main/3d-button-demo) # 结束语本文就到此结束了，希望大家阅读本文能所收获。 > 如果小伙伴们有别的想法，欢迎留言，让我们共同学习进步💪💪。 > > 如果文中有不对的地方，或是大家有不同的见解，欢迎指出🙏🙏。 > > 如果大家觉得所有收获，欢迎一键三连💕💕。