让我们先来看看实现的效果

html代码

<!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>第十二天</title><link rel="stylesheet" href="style.css">
</head>
<body><!-- 首先编写结构的html代码 --><div class="container"><div class="front"><div class="contents"><p>第十二天</p><span>坚持就是胜利</span></div></div><div class="back"><div class="contents"><h2>今天我们</h2><span>制作3D图片啦！</span></div></div></div>
</body>
</html>

css代码

:root {--background-color: #2c3e50;--border-color: #7591AD;--text-color: #34495e;--color1: #EC3E27;--color2: #fd79a8;--color3: #0984e3;--color4: #00b894;--color5: #fdcb6e;--color6: #e056fd;--color7: #F97F51;--color8: #BDC581;
}* {margin: 0;padding: 0;
}html {font-size: 14px;
}body {width: 100vw;height: 100vh;background-color: var(--background-color);display: flex;justify-content: center;align-items: center;font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';color: #FFF;
}
.container{position: relative;height: 400px;width: 800px;perspective: 1000px;transform-style: preserve-3d;}
.front,.back{position: absolute;width: 100%;height: 100%;border-radius: 20px;/* 背景居中 */background-size: cover;background-position: center;/* 内容居中 */display: flex;justify-content: center;align-items: center;/* 开启3D */perspective: 1000px;transform-style: preserve-3d;backface-visibility: hidden;/* transform: rotateY(60deg); */transition: 0.7s ease-in-out;
}
.front{background-image: linear-gradient(to right,#57505070,#29252570),url(6.jpg);
}
.back{background-image: linear-gradient(to right,#00000070,#00000070),url(5.jpg);transform: rotateY(180deg);
}
.contents{transform: translateZ(160px);
}
.container:hover .front{transform: rotateY(-180deg);
}
.container:hover .back{transform: rotateY(0deg);
}

素材图片

今日份知识总结

标签	作用
perspective	perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
transform-style	transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
backface-visibility	隐藏被旋转的 div 元素的背面
background-image	设置一个元素的背景图像。

transfrom-style值	描述
flat	子元素将不保留其 3D 位置。
preserve-3d	子元素将保留其 3D 位置。

通过backface-visibility: hidden;控制一个图像背对屏幕不显示，
然后通过hover控制图像翻转就可以完成两个图片的切换了，我们再用一个动画，就模拟出了这个翻转效果，就有了3D效果。
translateZ(160px);将文字凸出了出来，翻转效果变得更加明显！

[100天挑战100个前端效果]第十二天---3D图片(图片素材甚是优秀！)相关推荐

[100天挑战100个前端效果]第十九天---人物介绍卡片效果(猜猜是哪三个大佬？)
人物介绍卡片效果让我们先来看看实现的效果 html代码 css代码今日份知识总结让我们先来看看实现的效果 html代码 <!DOCTYPE html> <html lang=& ...
[100天挑战100个前端效果]第十六天---炫彩数字时钟
炫彩数字时钟让我们先来看看实现的效果 html代码 css代码今日份知识总结让我们先来看看实现的效果 html代码 <!DOCTYPE html> <html lang=&qu ...
挑战用100美元赚100万美元
推荐一部纪录片,中文译名各种各样,英文原名是<Undercover billionaire>,出自 Discovery networks,挑战用100美元赚100万美元(估值百万美元的企业 ...
100个暗黑系哑光效果lr/acr预设（含预设导入教程）
Grunge Presets Pack包含100个lr预设和100个acr预设,旨在为您的图像提供柔和的都市外观.此主题系列包括15种Lightroom预设应用效果,如去饱和度,淡化,喜怒无常的色调和 ...
用100元买100支笔c语言,用C编程!有100块钱,买100支笔,其中钢笔3元,圆珠笔2元,铅笔0.5元,问各买多少支?...
题目: 用C编程!有100块钱,买100支笔,其中钢笔3元,圆珠笔2元,铅笔0.5元,问各买多少支? 解答: 完整程序如下: main(){ int i3,i2,i05; for (i3=0;i3 猜 ...
简单实现几种常见的前端效果，附代码！
小伙伴们在参加web前端工程师面试的时候会遇到面试官问到几种比较常见的效果如何去实现,这里小千就来给大家整理了一下,快来看~ 1.防抖 2.节流 3.new 4.bind 5.deepCopy 6.柯 ...
min-width:100%和max-width:100%的区别
1.width:100%和width:auto width:100%,设定对象的宽度占父元素的100%不论设定元素的margin值是多少,不包含margin: width:auto,根据设定对象的实际 ...
mysql查询前100行和后100行
查询前100行 SELECT * FROM table LIMIT 100; 查询后100行 select * from table order by id desc limit 100: 查询第6- ...
Python实现在当前目录新建目录img, 里面包含100个文件, 100个文件名各不相同(X4G5.png)
题目要求: 1. 在当前目录新建目录img, 里面包含100个文件, 100个文件名各不相同(X4G5.png) 2. 将当前img目录所有以.png结尾的后缀名改为.jpg. 代码块: impor ...

[100天挑战100个前端效果]第十二天---3D图片(图片素材甚是优秀！)

3D图片

让我们先来看看实现的效果

html代码

css代码

素材图片

今日份知识总结

[100天挑战100个前端效果]第十二天---3D图片(图片素材甚是优秀！)相关推荐

最新文章

热门文章