鼠标悬浮图片3D翻转出现文本说明
分类：实例代码
鼠标悬浮图片3D翻转出现文本说明属于前端实例代码，有关更多实例代码大家可以查看。
分享一段代码实例，它实现了鼠标悬浮图片3D翻转出现文本说明的效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
html, body, div, h2, p {
margin: 0;
padding: 0;
}
.wrap {
width: 200px;
height: 200px;
border-radius: 200px;
overflow: hidden;
margin: 200px auto;
}
.img {
background: url("demo/CSS/img/shishi.jpg") center;
background-size: 200px;
}
.shadow {
width: 160px;
height: 160px;
border-radius: 160px;
background: #fff;
margin: 20px;
box-shadow: 0 0 0 20px rgba(255,255,255,.4);
transition: box-shadow 0.5s ease-in-out;
}
.photo {
width: 160px;
height: 160px;
position: relative;
}
.front, .back {
position: absolute;
width: 160px;
height: 160px;
border-radius: 160px;
overflow: hidden;
transform-style: preverve-3d;
backface-visibility: hidden;
transition: transform 0.5s ease-in-out;
}
.back {
background: #ff0b40;
text-align: center;
color: #fff;
}
.back h2 {
font-size: 22px;
padding: 25px 0 35px 0;
margin: 0 15px;
border-bottom: 1px solid #fff;
}
.back p {
font-size: 15px;
margin-top: 10px;
}
.wrap .front {
transform: rotateY(0deg);
}
.wrap .back {
transform: rotateY(180deg);
}
.wrap:hover .front {
transform: rotateY(180deg);
}
.wrap:hover .back {
transform: rotateY(0deg);
}
.wrap:hover .shadow {
box-shadow: 0 0 0 0 rgba(255,255,255,.4);
}
</style>
</head>
<body>
<div class="wrap img">
<div class="shadow">
<div class="photo">
<div class="front img"></div>
<div class="back">
<h2>刘诗诗</h2>
<p>
1978-03-10<br />
双鱼座
</p>
</div>
</div>
</div>
</div>
</body>
</html>
上面的代码实现了我们的要求，更多内容参阅相关阅读。
相关阅读:
（1）.border-radius参阅CSS3 border-radius一章节。
（2）.box-shadow参阅CSS3 box-shadow一章节。
（3）.transition参阅CSS3 transition一章节。
（4）.backface-visibility参阅CSS3 backface-visibility一章节。
鼠标悬浮图片3D翻转出现文本说明，这样的场景在实际项目中还是用的比较多的，关于鼠标悬浮图片3D翻转出现文本说明就介绍到这了。