为什么我点击鼠标没有翻转效果，郁闷！
<!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:Verdana, Geneva, sans-serif;
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;/*使他的子元素获得3D元素支持，这里是设置子元素距离试图的位置*/
}
/*海报样式*/
.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 .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;
}/*side-back在上,side-front在下，side-front会被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;
-webkit-transform-style:preserve-3d;/*使被转换的子元素支持3D的效果*/
transition:all 1s;
-webkit-transition:all 1s;
}
/*side-back在上旋转180度呈现镜像不可见（backface-visibility:hidden），side-front在下旋转0度呈现正像可见*/
.photo .side-front{
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.photo .side-back{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/*隐藏被旋转的div元素的背面*/
.photo-wrap .side{
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
/*整体旋转0度，反面在上呈现倒像不可见，正面在下呈现正像且可见 */
.photo_front .photo-wrap{
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
/*整体旋转180度，反面在下呈现正像可见，正面在上呈现倒像不可见 */
.photo_back .photo-wrap{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
<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>
</head>
<body onselectstart="return false;">
<div class="wrap">
<!--photo负责平移，旋转-->
<div class="photo photo_center photo_front onclick="turn(this)">
<!--photo-wrap负责3d翻转-->
<div class="photo-wrap">
<div class="side side-front">
<p class="image"><img src="image/35.jpg"></p>
<p class="caption">豪华跑车</p>
</div>
<div class="side side-back">
<p class="desc">描述信息</p>
</div>
</div>
</div>
</div>
</body>
</html>
