沒有翻轉(zhuǎn)效果
<!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軸旋轉(zhuǎn)效果*/}
/* 海報樣式 */
.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 負責平移、旋轉(zhuǎn) -->
<div class="photo photo_center photo_front" onclick="turn(this)">
<!-- photo-wrap 負責旋轉(zhuǎn) -->
<div>
<div class="side side-front">
<p><img src="../img/text.jpg" style="height: 600px;"></p>
<p>萬圣節(jié)狂歡派對</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>
2017-01-14
我也跟你一樣，加入的js代碼沒有卵用，谷歌和火狐都沒有效果。