为什么没有效果呢？
成长前端初学者
2016-11-30 22:04
<!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;/*设置他的盒模型表示他的内容都不超过他的边框*/}
.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>
1回答
-
- 打边炉
- 2016-12-09 23:44:19
html结构写错了，photo的div要包裹着side等div，而且少了一层photo-wrap，自己看着视频再敲一遍吧
CSS3+JS 实现超炫的散列画廊特效
46091 学习 · 215 问题
相似问题