鼠标经过图片，图片翻转显示另一张图片
Posted linhaisheng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标经过图片，图片翻转显示另一张图片相关的知识，希望对你有一定的参考价值。
当鼠标移入外层的div盒子子时,图片会翻转180度,并且显示图片的背面(即第二张图片)。
效果如下：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
.CICmenuBox{width: 1100px;display: flex;align-items: center;justify-content: center;transform: translate3d(0, 0, 0);
margin: 10px auto;box-sizing: border-box;}
.CICmenuBox ul{overflow: hidden;width: 100%;margin: 20px 0;padding: 0;position: relative;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.CICmenuBox ul li{list-style:none;width: 16.6%;margin: 10px 0%;text-align: center;cursor: pointer;float: left;border-bottom: 6px solid transparent;
padding-bottom: 5px;}
.CICmenuBox ul li:hover p{color: #053a7a;}
.CICmenuBox ul li:hover{border-bottom-color: #053a7a;}
.CICmenuBox ul li p{font-size: 16px;color: #808080;margin: 0;line-height: 23px;letter-spacing: 0px;}
.CICmenuImg{position: relative;height: auto;width: 100%;height: 160px;margin-bottom: 10px;}
.CICmenuBox .animationImg{position: absolute;left: 0;top: 0;width: 100%;height: 100%;transition: all .5s ease-in-out;transform-style: preserve-3d;
backface-visibility: hidden;box-sizing: border-box;}
.CICmenuBox .animationImg img {width: 85%;height: auto;border-radius: 100%;margin: 0px auto;display: block;border: 3px solid #0071bc;}
.CICmenuBox ul div.on{position: absolute;bottom: 0;left: 0.5%;z-index: 0;background: #053a7a;height: 6px;width: 120px;display: none;}
/*动画*/
.animationFront{transform: rotateY(0deg);z-index: 2;}
.animationBack {transform: rotateY(180deg);z-index: 1;}
/*控制翻转*/
.CICmenuBox li:hover .animationFront {z-index: 1;transform: rotateY(180deg);}
.CICmenuBox li:hover .animationBack {z-index: 2;transform: rotateY(0deg);}
@media only screen and (max-width: 1150px){
.CICmenuBox{width: 100%;}
.CICmenuBox ul{display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.CICmenuBox ul li{width: 31.3%;margin: 10px 1%;}
.CICmenuImg{width: 200px;height: 200px;margin: 0 auto;}
.CICmenuBox ul li p{margin-bottom: 10px;}
.CICmenuBox ul div.on{display: none;}
}
@media only screen and (max-width: 750px){
.CICmenuBox ul li{width: 48%;margin: 10px 1%;}
}
@media only screen and (max-width: 410px){
.CICmenuImg{width: 90%;}
.CICmenuBox ul li{margin-bottom: 30px;padding-bottom: 3px;}
.animationFront{display: none;}
.CICmenuBox .animationImg{position: inherit;}
.CICmenuImg{height: auto;}
.CICmenuBox ul li p{margin-top: 5px;font-size: 12px;margin-bottom: 0px;}
}
</style>
<div class="CICmenuBox">
<ul>
<li class="current">
<div class="CICmenuImg">
<a href="/sector/深圳国际商显及视听系统集成展" class="animationImg animationFront">
<img src="https://www.comm-integ.com/wp-content/uploads/2020/07/cicmenu01.png" alt=" ">
</a>
<a href="/sector/深圳国际商显及视听系统集成展" class="animationImg animationBack">
<img src="https://www.comm-integ.com/wp-content/uploads/2020/07/cicmenu001.png" alt=" ">
</a>
</div>
<p>商显及视听系统集成展</p>
</li>
<li>
<div class="CICmenuImg">
<a href="/sector/第十七届深圳国际led展" class="animationImg animationFront">
<img src="https://www.comm-integ.com/wp-content/uploads/2020/07/cicmenu02.png" alt=" ">
</a>
<a href="/sector/第十七届深圳国际led展" class="animationImg animationBack">
<img src="https://www.comm-integ.com/wp-content/uploads/2020/07/cicmenu002.png" alt=" ">
</a>
</div>
<p>LED展</p>
</li>
<li>
<div class="CICmenuImg">
<a href="/sector/深圳国际灯光音响及智能多媒体展" class="animationImg animationFront">
<img src="https://www.comm-integ.com/wp-content/uploads/2020/07/cicmenu03.png" alt=" ">
</a>
<a href="/sector/深圳国际灯光音响及智能多媒体展" class="animationImg animationBack">
<img src="https://www.comm-integ.com/wp-content/uploads/2020/07/cicmenu003.png" alt=" ">
</a>
</div>
<p>灯光音响及智能多媒体展</p>
</li>
<li>
<div class="CICmenuImg">
<a href="/sector/第十三届深圳国际数字标牌展" class="animationImg animationFront">
<img src="https://www.comm-integ.com/wp-content/uploads/2020/07/cicmenu04.png" alt=" ">
</a>
<a href="/sector/第十三届深圳国际数字标牌展" class="animationImg animationBack">
<img src="https://www.comm-integ.com/wp-content/uploads/2020/07/cicmenu004.png" alt=" ">
</a>
</div>
<p>数字标牌展</p>
</li>
<li>
<div class="CICmenuImg">
<a href="/sector/第十九届深圳国际广告标识展" class="animationImg animationFront">
<img src="https://www.comm-integ.com/wp-content/uploads/2020/07/cicmenu05.png" alt=" ">
</a>
<a href="/sector/第十九届深圳国际广告标识展" class="animationImg animationBack">
<img src="https://www.comm-integ.com/wp-content/uploads/2020/07/cicmenu005.png" alt=" ">
</a>
</div>
<p>广告标识展</p>
</li>
<li>
<div class="CICmenuImg">
<a href="/sector/深圳国际商业零售与设计展" class="animationImg animationFront">
<img src="https://www.comm-integ.com/wp-content/uploads/2020/07/cicmenu06.png" alt=" ">
</a>
<a href="/sector/深圳国际商业零售与设计展" class="animationImg animationBack">
<img src="https://www.comm-integ.com/wp-content/uploads/2020/07/cicmenu006.png" alt=" ">
</a>
</div>
<p>商业零售与设计展</p>
</li>
<div class="on"></div>
</ul>
</div>
</body>
</html>
以上是关于鼠标经过图片，图片翻转显示另一张图片的主要内容，如果未能解决你的问题，请参考以下文章