设置3d效果时,并没有side_back在上,而是side_front在上面先显示,为什么
为什么我的加了翻转之后,没有side_back在上面,而是side_front在上面
源代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片画廊</title>
<style>
*{padding:0;margin:0;}
body{background:#fff;color:#555;font-family:'Avenir Next','微软雅黑';font-size:14px;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;}
.wrap{width:100%;height:600px;position:absolute;top:50%;margin-top:-300px;background:#333;overflow:hidden;}
/*海报样式*/
.photo{width:260px;height:320px;position:absolute;z-index: 1;box-shadow:0 0 1px rgba(0,0,0,0.01);-webkit-perspective:800px;perspective:800px;}
.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 .caption{text-align:center;font-size:16px;line-height:50px;}
.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;}
.photo_wrap .side_front{-webkit-transform:rotateY(0deg);}
.photo_wrap .side_back{-webkit-transform:rotateY(180deg);}
</style>
</head>
<body>
<div>
<!-- photo 负责平移和旋转 -->
<div class="photo photo_center">
<!-- photo_wrap负责翻转 -->
<div>
<div class="side side_front">
<p><img src="images/pic1.jpg" alt=""></p>
<p>标题标题标题</p>
</div>
<div class="side side_back">
<p>描述信息</p>
</div>
</div>
</div>
</div>
</body>
</html>