--- theme: smartblue highlight: a11y-dark --- 子辰发现了一个炫酷的3D卡片效果，这样的效果实现起来，你有没有思路呢？接下来我们一起来看一下这个效果的实现过程。

首先看它的 HTML 代码： ```html

``` HTML 的代码非常简单，就两个 div 分别代表两张卡片。每个 div 里有三个图片，分别是封面、标题以及英雄，三张图片分别设置了不同的类样式。然后再来看一下基本样式： ```css /* 清除默认样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* body 设置 flex 为了让图片居中 */ body { width: 100vw; height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; /* 背景色先设置为白色看的清楚 */ /* background: #191c29; */ background: #fff; } /* 设置每张卡片的基本样式，然后向上移动一点 */ .card { width: 200px; height: 300px; margin: 0 50px; transform: translateY(-50%); position: relative; } ``` 我们首先来做一下布局，由于卡片里边有三张图片，这三张图片有覆盖关系，所以三张图片应该是绝对定位，卡片我们已经设置了相对定位。然后我们为图片设置一下公共样式： ```css /* etc... */ .card img { position: absolute; left: 0; width: 100%; /* 因为图片的效果是有过渡的，我们在这里也统一设置一下 */ transition: 0.5s; } ``` 设置完之后效果就是这个样子的：

那么接下来就是分别设置每一张图片了： ```css /* etc... */ .cover { height: 100%; z-index: 1; } .hero { height: 100%; z-index: 2; /* 英雄在最初是不可见的 */ opacity: 0; } .title { z-index: 3; bottom: 0; } ``` 因为覆盖关系是标题在最上层，英雄在中层，封面在下层，所以我们使用 z-index 设置它们的覆盖关系。然后接下来就是 hover 效果了，一个一个来。首先是 cover 它要进行旋转： ```css /* etc... */ .card:hover .cover { /* 设置旋转 */ transform: rotateX(25deg); } ```

旋转有了但是没有 3D 的效果，我们加一下： ```css /* etc... */ .card:hover .cover { /* 设置 3D 透视 */ transform: perspective(500px) rotateX(25deg); } ```

然后我们再加一下阴影： ```css /* etc... */ .card:hover .cover { transform: perspective(500px) rotateX(25deg); /* 设置阴影 */ box-shadow: 0 35px 0px rgba(0, 0, 0, 0.75); } ```

现在阴影太大，太实了，所有要内缩和虚化一下： ```css /* etc... */ .card:hover .cover { transform: perspective(500px) rotateX(25deg); /* 阴影虚化 35px 然后内缩 -8px */ box-shadow: 0 35px 35px -8px rgba(0, 0, 0, 0.75); } ```

现在就有点那个味道了。然后我们写下一个 hero 英雄： ```css /* etc... */ .card:hover .hero { /* 透明度设置为不透明 */ opacity: 1; /* 同样设置 3D 效果，然后横向不移动，纵向向上移动 50px，z 轴上靠近我们的眼睛一点设置 50px */ transform: perspective(500px) translate3d(0, -50px, 50px); } ```

最后就是 title 标题了，标题和英雄基本一致，只不过向上移动少一点： ```css /* etc... */ .card:hover .title { /* 设置 3D 效果，，然后横向不移动，纵向向上移动 25px，z 轴上靠近我们的眼睛一点设置 50px */ transform: perspective(500px) translate3d(0, -25px, 50px); } ```

最后把背景色加上就完整实现了： ```css * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100vw; height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; background: #191c29; } .card { width: 200px; height: 300px; margin: 0 50px; transform: translateY(-50%); position: relative; } .card img { position: absolute; width: 100%; left: 0; transition: 0.5s; } .cover { height: 100%; z-index: 1; } .card:hover .cover { transform: perspective(500px) rotateX(25deg); box-shadow: 0 35px 35px -8px rgba(0, 0, 0, 0.75); } .hero { height: 100%; z-index: 2; opacity: 0; } .card:hover .hero { opacity: 1; transform: perspective(500px) translate3d(0, -50px, 50px); } .title { z-index: 3; bottom: 0; } .card:hover .title { transform: perspective(500px) translate3d(0, -25px, 50px); } ```

# 总结今天的东西比较简单，我们娱乐放松一下。如果有需要素材的同学可以关注子辰并私信，子辰会将素材发送给你。 # 本文来源本文来源自渡一公众号:**Duing**，欢迎关注，获取**超新**、**超深入**的技术讲解感谢你阅读本文，如果你有任何疑问或建议，请在评论区留言，如果你觉得这篇文章有用，请点赞收藏或分享给你的朋友！