视觉优化-立体图片实现
我们之前在网页开发中，图片基本都是正正方方的平面图，今天给大家分享一个视觉优化的方案，将平面图变为立体图，效果如下。使用css3提供的“3d透视”，对于3d透视，我们来看看。元素由三个元素组成。更多同步资源请参考↓↓↓。
·
前言
我们之前在网页开发中，图片基本都是正正方方的平面图，今天给大家分享一个视觉优化的方案，将平面图变为立体图，效果如下
实现方案
<1>使用css3提供的“3d透视”，对于3d透视，我们来看看这个网站
<2>元素由三个元素组成
具体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.book-cover {
/* 其他元素需要用absolute来调整位置，所以这里必须用relative。 */
position: relative;
width: 100px;
height: 200px;
transform: perspective(60px) rotateY(-10deg);
margin:100px auto;
}
.book-cover .link {
position: relative;
z-index: 3;
}
.book-cover img {
width: 100px;
border: 1px solid transparent;
height: 192px;
}
/* 纸张 */
.book-cover::after {
position: absolute;
z-index: 2;
top: 2%;
left: 100%;
width: 10px;
height: 92%;
content: '';
/* 保持与书封面的旋转方向相反*/
transform: perspective(60px) rotateY(30deg);
/* 加上一点背景和内阴影，让纸张显得有点质感，而不是单纯的白色 */
background-color: #eee;
box-shadow: inset 0 0 5px #333;
}
/* 阴影 */
.book-cover span {
position: absolute;
z-index: 1;
top: 84%;
left: 7px;
/* 这里的宽度不要太大，直接让旋转来实现出一个三角形的投影 */
width: 75px;
height: 16px;
box-shadow: 25px 0 5px 5px #ADADAD;
transform: perspective(82px) rotateX(-54deg) rotateY(-4deg);
}
</style>
</head>
<body>
<!-- 书封容器 -->
<div class="book-cover">
<!-- 链接 -->
<a class="link" href="https://www.baidu.com" target="_blank">
<img src="https://bookcover.yuewen.com/qdbimg/349573/1015682988/180" alt="">
</a>
<!-- 阴影 -->
<span></span>
<!-- 灰色部分纸张厚度填充 -->
<!-- ::after -->
</div>
</body>
</html>更多学习视频学习资料请参考：B站搜索“我们一起学前端”
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)