为什么没有效果
慕虎7188715
2016-01-17 19:01
跟老师代码一样，怎么就是点击没效果啊？
<!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">
<!--photo负责平移、旋转-->
<div class="photo photo_center photo_front onclick='turn(this)">
<!--photo-wrap负责翻转-->
<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>
2回答
-
- 亚里士多偷
- 2016-06-13 23:05:44
onclick='turn(this)' 这个写在class里面了。不要写在class里面，单独提出来就好了。
还有，楼主有个transform拼写成了tranform。
-
- Charless
- 2016-03-04 09:14:27
你可以对照一下我的代码：https://github.com/chaooo/photos
CSS3+JS 实现超炫的散列画廊特效
46090 学习 · 215 问题
相似问题