子辰发现了一个炫酷的3D卡片效果，这样的效果实现起来，你有没有思路呢？

接下来我们一起来看一下这个效果的实现过程。

首先看它的 HTML 代码：

<div class="card">
  <!-- 封面 -->
  <img src="./assets/cover1.jpeg" class="cover" />
  <!-- 标题 -->
  <img src="./assets/title1.png" class="title" />
  <!-- 英雄 -->
  <img src="./assets/hero1.webp" class="hero" />
</div>
<div class="card">
  <img src="./assets/cover2.jpeg" class="cover" />
  <img src="./assets/title2.png" class="title" />
  <img src="./assets/hero2.webp" class="hero" />
</div>

HTML 的代码非常简单，就两个 div 分别代表两张卡片。

每个 div 里有三个图片，分别是封面、标题以及英雄，三张图片分别设置了不同的类样式。

然后再来看一下基本样式：

/* 清除默认样式 */
* {
  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;
}

我们首先来做一下布局，由于卡片里边有三张图片，这三张图片有覆盖关系，所以三张图片应该是绝对定位，卡片我们已经设置了相对定位。

然后我们为图片设置一下公共样式：

/* etc... */
.card img {
  position: absolute;
  left: 0;
  width: 100%;
  /* 因为图片的效果是有过渡的，我们在这里也统一设置一下 */
  transition: 0.5s;
}

设置完之后效果就是这个样子的：

那么接下来就是分别设置每一张图片了：

/* 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 它要进行旋转：

/* etc... */
.card:hover .cover {
  /* 设置旋转 */
  transform: rotateX(25deg);
}

旋转有了但是没有 3D 的效果，我们加一下：

/* etc... */
.card:hover .cover {
  /* 设置 3D 透视 */
  transform: perspective(500px) rotateX(25deg);
}

然后我们再加一下阴影：

/* etc... */
.card:hover .cover {
  transform: perspective(500px) rotateX(25deg);
  /* 设置阴影 */
  box-shadow: 0 35px 0px rgba(0, 0, 0, 0.75);
}

现在阴影太大，太实了，所有要内缩和虚化一下：

/* etc... */
.card:hover .cover {
  transform: perspective(500px) rotateX(25deg);
  /* 阴影虚化 35px 然后内缩 -8px */
  box-shadow: 0 35px 35px -8px rgba(0, 0, 0, 0.75);
}

现在就有点那个味道了。

然后我们写下一个 hero 英雄：

/* etc... */
.card:hover .hero {
  /* 透明度设置为不透明 */
  opacity: 1;
  /* 同样设置 3D 效果，然后横向不移动，纵向向上移动 50px，z 轴上靠近我们的眼睛一点设置 50px */
  transform: perspective(500px) translate3d(0, -50px, 50px);
}

最后就是 title 标题了，标题和英雄基本一致，只不过向上移动少一点：

/* etc... */
.card:hover .title {
  /* 设置 3D 效果，，然后横向不移动，纵向向上移动 25px，z 轴上靠近我们的眼睛一点设置 50px */
  transform: perspective(500px) translate3d(0, -25px, 50px);
}

最后把背景色加上就完美实现了：

* {
  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，欢迎关注，获取最新、最全、最深入的技术讲解

感谢你阅读本文，如果你有任何疑问或建议，请在评论区留言，如果你觉得这篇文章有用，请点赞收藏或分享给你的朋友！