为什么显示有问题呢0 0？？-慕课网

为什么显示有问题呢0 0？？

来源：2-3 3D效果编写

dreamyi

2016-07-29 16:49

代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{padding:0;margin:0;}
body{
background:#fff;
color:#555;
font-family:'Avenir Next','Lantinghei SC';
font-size:14px;
-webkit-font-smoothing:antialiased;/*平滑效果*/
width:100%;
height:100%;
}
section.wrap{width:800px;height:600px;margin:-300px 0 0 -400px;position:absolute;top:50%;left:50%;}
.wrap .content{width:100%;height:100%;overflow:hidden;background:#333;
-webkit-perspective:800px;}
/*海报样式*/
.content .photo{width:200px;height:280px;position:absolute;z-index:1;box-shadow:0 0 1px rgba(0,0,0,.01);}
.content .photocenter{top:50%;left:50%;margin:-140px 0 0 -100px;z-index:999;}
.content .photo .photo_wrap{width:100%;height:100%;overflow:hidden;position:absolute;-webkit-transform-style:preserve-3d;-webkit-transition:all .6s;}/**/
.content .photo .side{width:100%;height:100%;position:absolute;
padding:20px;box-sizing:border-box;background:#eee;}
.content .photo .image{width:100%;height:200px;overflow:hidden;}
.content .photo .image img{width:auto;height:100%;}
.content .photo .caption{width:100%;text-align:center;height:40px;line-height:1.5em;}
.content .photo .desc{width:100%;height:100%;}

.photo_wrap .side_front{-webkit-transform:rotateY(0deg);}
.photo_wrap .side_back{-webkit-transform:rotateY(180deg);}
.photo_wrap .side{-webkit-backface-visibility:hidden;backface-visibility:hidden;}

.front .photo_wrap{-webkit-transform:rotateY(0deg);}
.back .photo_wrap{-webkit-transform:rotateY(180deg);}/**/
</style>
</head>
<body onselectstart="return false;">
<section>
<div>
<div class="photo photocenter back"><!-- 2d旋转 -->
<div><!-- 3d翻转 -->
<div class="side side_front">
<div>
<img src="images/1.jpg" alt="">
</div>
<div>某人的目光<br /> —— 新海诚</div>
</div>
<div class="side side_back">
<div>
《某人的目光》是由新海诚执导的家庭片，平野文、花村怜美、小川真司等参与演出。<br />
《某人的目光》讲述了以进入工作岗位为契机而开始独自生活的冈村绫，与自己的父亲、母亲以及猫咪之间的故事。
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>