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