子辰发现了一个炫酷的3D卡片效果,这样的效果实现起来,你有没有思路呢?
接下来我们一起来看一下这个效果的实现过程。
首先看它的 HTML 代码:
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 里有三个图片,分别是封面、标题以及英雄,三张图片分别设置了不同的类样式。
然后再来看一下基本样式:
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 ,欢迎关注,获取最新 、最全 、最深入的技术讲解
感谢你阅读本文,如果你有任何疑问或建议,请在评论区留言,如果你觉得这篇文章有用,请点赞收藏或分享给你的朋友!