#鼠标悬浮图片3D翻转出现文本说明
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>