                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /CSS3+JS 實現超炫的散列畫廊特效

為什么沒有效果

跟老師代碼一樣，怎么就是點擊沒效果??？

<!DOCTYPE html>
<html>
<head lang="en">
? ?<meta charset="UTF-8">
? ?<title></title>
? ?<style>
*{margin:0;padding:0;}
? ? ? ?body{
? ? ? ? ? ?background-color: #fff;
color:#555;
font-family: 'Avenir Next','Lantinghe SC';
-webkit-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);
left: 50%;
top: 50%;
margin: -160px 0 0 -130px;
}
? ? ? ?.photo .photo-wrap .side{
? ? ? ? ? ?width: 100%;
height: 100%;
background-color: #eee;
position: absolute;
top:0;
right:0;
padding:20px;
box-sizing: border-box;
-webkit-backface-visibility:hidden;
}
? ? ? ?.photo .photo-wrap .side-front{
? ? ? ? ? ?-webkit-transform:rotateY(0deg);
}
? ? ? ?.photo .photo-wrap .side-front .image{
? ? ? ? ? ?width: 100%;
height: 250px;
line-height: 250px;
overflow: hidden;
}
? ? ? ?.photo .photo-wrap .side-front .image img{
? ? ? ? ? ?width: 100%;
vertical-align: middle;/*使高度不夠的圖片居中顯示*/
}
? ? ? ?.photo .photo-wrap .side-front .caption{
? ? ? ? ? ?text-align: center;
font-size: 16px;
line-height: 50px;
}
? ? ? ?.photo .photo-wrap .side-back{
? ? ? ? ? ?-webkit-tranform:rotateY(180deg);
/*display: none;*/
}
? ? ? ?.photo .photo-wrap .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 .photo-wrap{
? ? ? ? ? ?position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition:all .6s ease-in-out;
}
? ? ? ?.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 class="photo photo_center photo_front onclick='turn(this)">

<div class="photo-wrap">
? ? ? ? ? ?<div class="side side-front">
? ? ? ? ? ? ? ?<p class='image'><img src="img/3.jpg" alt=""/></p>
? ? ? ? ? ? ? ?<p class="caption">不咎既往</p>
? ? ? ? ? ?</div>
? ? ? ? ? ?<div class="side side-back">
? ? ? ? ? ? ? ?<p class="desc">描述信息</p>
? ? ? ? ? ?</div>
? ? ? ?</div>
? ?</div>
</div>
</body>
</html>
<script>
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>