html实现图片旋转显示背面内容
datehoer 12/16/2020 csshtmlweb
其实说是HTML，实际上还是要通过CSS来实现具体效果的，毕竟实际上HTML是框架，而CSS则是填充框架的东西。这篇文章是介绍一个简单的案例，鼠标触碰图片，然后图片发生旋转，进而展现文字。
可以看一下动图演示:
其实这个是通过transform旋转以及backface-visibiliity来实现图片隐藏的。
简单介绍一下这个HTML实现图片旋转显示背面文字的案例思路。
首先是创建一个框架，用来储存这些图片以及文字。然后将搭配的图片文字储存在同一个div里，用以日后的地位修改。然后接下来先将文字进行旋转180°，之后设置hover属性即可。之所以要设置先旋转180°是因为如果不设置的话，那么图片旋转之后实现的效果就会使反向的，文字变成反向的文字，而我们事先旋转后，再进行触碰旋转的话，则会使的文字正向了。
主要用到的还是上面两个属性，一个是transform: rotateY(180deg); 这个是设置内容旋转180°，然后再一个是backface-visibility: hidden; 这个是隐藏旋转的内容的背面，也就是你旋转之后，不会显示东西，这样子可以实现上面的效果了。
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #0d3462;
}
.wutai {
width: 760px;
height: 220px;
margin: 100px auto;
}
.fu {
width: 170px;
height: 190px;
margin: 10px;
transition: 1.5s;
transform-style: preserve-3d;
float: left;
position: relative;
}
.fu:hover {
transform: rotateY(180deg);
}
.box {
/* position: absolute; */
width: 170px;
height: 190px;
position: absolute;
}
.face {
border: 2px solid #4b2518;
backface-visibility: hidden;
}
.hip {
border: 2px solid white;
background-color: #4b2518;
color: white;
text-align: center;
transform: rotateY(180deg);
backface-visibility: hidden;
}
</style>
<body>
<div class="wutai">
<div class="fu">
<div class="box face">
<img src="1.jpg" alt="">
</div>
<div class="box hip">
<h3>浓缩咖啡</h3>
</div>
</div>
<!-- 其他图片和文字部分 -->
</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
具体详情内容可以通过上面的代码进行自我测试，其实最容易实现效果的就是先全部复制上去，然后再将不明白的属性给加上注释，查看发生了什么变化，如果没有变化，可以先记下来然后继续注释别的内容，最后将实在不明白效果的复制到百度进行查询。
如果有什么不懂的可以在评论区留言，我会在看到的第一时间进行回复的。