                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /CSS3+JS 實現超炫的散列畫廊特效

圖片翻轉問題

在360瀏覽器上能翻轉，但是圖片一直在；在firefox上根本就不能翻轉，怎么回事?。?/p>

<!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>