图片翻转问题

源自：3-1 简单翻转控制
图片翻转问题

在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>
提问者：fight_2015 2015-10-27 22:14
图片翻转问题

个回答
