点击没有翻转效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>海报画廊</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: #fff;
color: #555;
font-family: 'Avenir Next','Lantinghei SC';
font-size: 14px;
-webkit-font-smoothing:antialiased;
}
.wrap{
width: 100%;
height: 600px;
position: absolute; /* 设置垂直居中的方法 */
top: 50%;
margin-top: -300px;
background: #333;
overflow: hidden;
-webkit-perspective: 800px;
}
/* 海报样式 */
.photo{
width: 260px;
height: 320px;
position: absolute;
z-index: 1;
box-shadow:0 0 1px rgba(0, 0, 0, .01);
}
.photo .side{
width: 100%;
height: 100%;
background-color: #eee;
position: absolute;
top: 0;
right: 0;
padding: 20px;
box-sizing:border-box;
}
.photo .side-front{}
.photo .side-front .image{
width: 100%;;
height: 250px;
line-height: 250px;
overflow: hidden;
}
.photo .side-front .image img{
width: 100%;
}
.photo .side-front .caption{
text-align: center;
font-size: 16px;
line-height: 50px;
}
.photo .side-back{
}
.photo .side-back .desc{
color: #666;
font-size: 14px;
line-height: 1.5em;
}
/*当前选中海报的样式*/
.photo_center{
left:50%;
top:50%;
margin:-160px 0 0 -130px;
z-index: 999;
}
/* 负责旋转*/
.photo-wrap{
position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: all .6s;
}
.photo-wrap .side-front{
-webkit-transform:rotateY(0deg);
}
.photo-wrap .side-back{
-webkit-transform:rotateY(180deg);
}
.photo-wrap .side{
-webkit-backface-visibility: hidden;
}
.photo_front .photo-wrap{
-webkit-transform:rotateY(0deg);
}
.photo_back .photo-wrap{
-webkit-transform:rotateY(180deg);
}
</style>
</head>
<body onselectstart="return false;"> <!--防止页面文字被选中-->
<div class="wrap">
<div id="one" class="photo photo_center photo_front" onclick="fn(this)">
<div class="photo-wrap">
<div class="side side-front">
<p class="image"><img src="image/dududu.jpg" /></p>
<p class="caption">你就是一个小歘歘</p>
</div>
<div class="side side-back">
<p class="desc">描述信息</p>
</div>
</div>
</div>
</div>
<script>
function fn(elem){
var ss = elem.className;
if(/photo_front/.test( ss ) ){
ss = ss.replace(/'photo_front'/,'photo_back') //正面变成背面
}else{
ss = ss.replace(/'photo_back'/,'photo_front')
}
return elem.className=ss;
}
</script>
</body>
</html>
