没有翻转效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>海报画廊</title>
<style type="text/css">
* {padding: 0; margin: 0;}
body {background: #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; perspective: 800px;/* 能够看出x，y轴旋转效果*/}
/* 海报样式 */
.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: #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%; transform-style: preserve-3d;}
.photo-wrap .side-front{transform: rotateY(0deg);}
.photo-wrap .side-back{transform: rotateY(180deg);}
.photo-wrap .side {backface-visibility: hidden;}
.photo_front .photo-wrap{transform: rotateY(0deg);}
.photo_back .photo-wrap{transform: rotateY(180deg);}
</style>
</head>
<body onselectstart="return false;">
<div>
<!-- photo 负责平移、旋转 -->
<div class="photo photo_center photo_front" onclick="turn(this)">
<!-- photo-wrap 负责旋转 -->
<div>
<div class="side side-front">
<p><img src="../img/text.jpg" style="height: 600px;"></p>
<p>万圣节狂欢派对</p>
</div>
<div class="side side-back">
<p>描述信息</p>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
// 1，翻面控制
function turn(elem) {
var cls = elem.className;
if (/photo_front/.test( cls ))
// 正则表达式： 检测传入的className中是否有photo_front
{
cls = cls.replace(/photo_front/,'photo_back')
}else{
cls = cls.replace(/photo_back/,'photo_front')
}
return elem.className = cls;
}
</script>
