為什么我背面side-back的大小和side-front大小不一樣??？
<!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>無標(biāo)題文檔</title>
<style type="text/css">
ody,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fileset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{font-size:12px;}
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none;}
textarea{resize:none;}
a{text-decoration:none;}
/*清浮動*/
.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;}
*{padding: 0;margin:0;}/*所有元素padding和margin都設(shè)為0*/
body{
background-color:#fff;
color:#555;
font-family:'Avenir Next','Lantinghei SC';/*中文為蘭亭雅黑*/
font-size:14px;
-webkit-font-smoothing:antialisase;/*字體平滑*/
}
.wrap{
width:100%;
height:600px;
position:absolute; ?/*設(shè)置居中*/
top:50%; ? ? ? ? ? /*設(shè)置居中*/
margin-top:-300px;/*設(shè)置居中*/
background-color:#333;
overflow:hidden;/*超出div.wrap的照片就不顯示了*/
/*海報樣式*/
? ? -webkit-perspective:800px;/*為了透視3D旋轉(zhuǎn)*/
}
.photo{
width:260px;
height:320px;
position:absolute;
z-index:1;
box-shadow:0 0 1px rgba(0,0,0,.01);/*因?yàn)槭请S機(jī)定位的，要用到left和top*/
}
.photo.side{
width:100%;/*正面和反面*/
height:100%;
background-color:red;
position:absolute;/*為了漂浮起來*/
top:0;
right:0;
padding:20px;
box-sizing:border-box;/*內(nèi)容和padding都不會超過邊框*/
}
.photo .side-front{}/*正面*/
.photo .side-front.image{
width:100%;
height:250px;
line-height:250px;/*當(dāng)里面的圖片標(biāo)簽不足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{
width:100%;
height:100%;
color:#666;
font-size:14px;
line-height:1.5em;
? }
??
?.photo_center{
?left:50%;
?top:50%;/*設(shè)置水平居中*/
?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:translateY(0deg);
}
.photo-wrap .side-back{
?-webkit-transform:translateY(180deg);
}
? ? .photo-wrap .side{
-webkit-backface-visibility:hidden
}
.photo_front .photo-wrap{
-webkit-transform:translateY(0deg);
}
.photo_back .photo-wrap{
?-webkit-transform:translateY(180deg);
}
</style>
</head>
<body onselectstart="return false;">
? ?<div class="wrap">
? ? ? <div class="photo photo_center"><!--負(fù)責(zé)平面旋轉(zhuǎn)-->
? ? ? ? ?<div clas="photo-wrap"><!--負(fù)責(zé)3D旋轉(zhuǎn)-->
? ? ? ? ? <div class="side side-front">
? ? ? ? ? ? ? <p class="image"><img src="images\test.jpg"/> </p>
? ? ? ? ? ? ? ?<p class="caption"> 麥兜</p>
? ? ? ? ? </div>
? ? ? ? ? <div class ="side side-back">
? ? ? ? ? ? ? <p class="desc">描述信息</p>
? ? ? ? ? </div>
? ? ? ? ? </div>?
? ? ?</div>
? ??
? ?</div>
</body>
</html>
2015-05-14
好孩子，做好分享一下啊~
2015-05-13
我知道自己錯哪兒了，錯在了.photo ?.side{}這兩個之間一定要有空格，我剛剛的問題就是因?yàn)闆]有空格，導(dǎo)致出錯了