html实现图⽚旋转显⽰背⾯内容
其实说是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 class="fu">
<div class="box face">
<img src="2.jpg" alt="">
</div>
<div class="box hip">
<h3>浓缩咖啡</h3>
</div>
</div>
<div class="fu">
<div class="box face">
<img src="3.jpg" alt="">
</div>
<div class="box hip">
<h3>浓缩咖啡</h3>
</div>
</div>
<div class="fu">
<div class="box face">
<img src="4.jpg" alt="">html图片展示特效
</div>
<div class="box hip">
<h3>浓缩咖啡</h3>
</div>
</div>
</div>
</body>
具体详情内容可以通过上⾯的代码进⾏⾃我测试，其实最容易实现效果的就是先全部复制上去，然后再将不明⽩的属性给加上注释，查看发⽣了什么变化，如果没有变化，可以先记下来然后继续注释别的内容，最后将实在不明⽩效果的复制到百度进⾏查询。
如果有什么不懂的可以在评论区留⾔，我会在看到的第⼀时间进⾏回复的。
更多请关注：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。