為什么沒有效果呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>畫廊</title>
<style type="text/css">
*{padding: 0;margin: 0;}
body{background-color: #fff;color: #555;font-family: 'Avenir Next','Lantinghei SC'; font-size: 14px;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;}
.wrap{width: 100%;height: 600px;position: absolute;top: 50%;margin-top: -300px;background-color: #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;/*設置他的盒模型表示他的內(nèi)容都不超過他的邊框*/}
.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 .desc{color: #666;font-size: 14px;line-height: 1.5em;}
/*當前選中的海報樣式*/
.photo_center{left: 50%;top:50%;width: 260px;height: 320px;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>
<!-- ?photo負責平移和旋轉 -->
<div class="photo photo_center photo_front" onclick="turn(this)">
? ? ? ? ? ? <!-- photo-wrap負責翻轉 -->
<div >
<div class="side side-front">
<p><img src="images/1.jpg" /></p>
<p>左耳</p>
</div>
<div class="side side-back">
<p>描述信息</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// 頁面翻轉
function turn(elem){
var cls=elem.className;
if(/photo_front/.test("cls")){
cls=cls.replace(/photo_front/,"photo_back");
}else{
cls=cls.replace(/photo_back/,"photo_front");
}
return elem.className=cls;
}
</script>
</body>
</html>
2016-12-09
html結構寫錯了，photo的div要包裹著side等div，而且少了一層photo-wrap，自己看著視頻再敲一遍吧