图片翻转问题
来源：3-1 简单翻转控制
fight_2015
2015-10-27 22:14
在360浏览器上能翻转，但是图片一直在；在firefox上根本就不能翻转，怎么回事啊？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; 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;
}
.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{
}
.phoyo .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{
}
.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%;
-webkit-transform-style:presereve-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>
<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_back" onclick="turn(this)">
<!--photo-wrap 负责翻转-->
<div class="photo-wrap">
<div class="side side-front">
<p class="image"><img src="img/寒战.jpg" /></p>
<p class="caption">寒战</p>
</div>
<div class="side side-back">
<p class="desc">描述信息</p>
</div>
</div>
</div>
</div>
</body>
</html>
写回答
关注
1回答
-
- fight_2015
- 2015-10-28 19:40:03
自问自答吧，其实是自己拼错了一个单词，在83行-webkit-transform-style:presereve-3d;应该是-webkit-transform-style:preserve-3d;
CSS3+JS 实现超炫的散列画廊特效
实现更自由的切换照片的画廊效果，打造超酷的切换动画
46090 学习 · 215 问题
相似问题