<!DOCTYPE?html>
<html>
<head>
<title>顯示周幾</title>
<meta?charset="utf-8"?/>
<style?type="text/css">
*{
margin:?0;padding:?0;
}
body{
font-family:?"Microsoft?Yahei";
-webkit-font-smoothing:?antialiased;
background:?#fff;
color:?#555;
font-size:?14px;
}
@font-face{
font-family:?myFont;
src:?url(../font/MyriadPro-Light.otf);
}
/*?整體內(nèi)容?*/
.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;?/*?此處:?設(shè)置給居中的海報?*/
box-shadow:?0,?0,?1px?rgba(?0,?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_font?{}
.photo?.side_font?.image?{
width:?100%;?height:?250px;
line-height:?250px;
overflow:?hidden;
}
.photo?.side_font?img?{
width:?100%;
}
.photo?.side_font?.caption?{
text-align:?center;
font-size:?16px;
line-height:?50px;
}
.photo?.side_back?{
color:?#666;
font-size:?14px;
line-height:?1.5em;
}
/*?當前選中的海報?*/
.photo_center?{
width:?260px;?height:?320px;
top:?50%;?left:?50%;
margin:?-160px?0?0?-130px;
z-index:?999;
}
/*?負責3D翻轉(zhuǎn)，這里只是把圖片兩面定位好?*/
.photo_wrap?{
position:?absolute;
width:?100%;?height:?100%;
-webkit-transform-style:?preserve-3d;
}
.photo_wrap?.side_font?{
-webkit-transform:?rotateY(?0deg?);
}
.photo_wrap?.side_back?{
-webkit-transform:?rotateY(?180deg?);
}
.photo_wrap?.side?{
-webkit-backface-visibility:?hidden;
}
/*?這里才是控制翻轉(zhuǎn)，想要顯示正面，把下面的?class?切換即可?*/
.photo_font?.photo_wrap?{
-webkit-transform:?rotateY(?0deg?);
}
.photo_back?.photo_wrap?{
-webkit-transform:?rotateY(?180deg?);
}
</style>
<script?type="text/javascript">
</script>
</head>
<body>
<!--?海報畫廊?-->
<div?class="wrap">
<!--?photo?負責2D平移旋轉(zhuǎn)??最后的?class?負責翻轉(zhuǎn)-->
<div?class="photo?photo_center?photo_back">
<!--?photo_wrap?負責定位?-->
<div?class="photo_wrap">
<!--?圖片正面?-->
<div?class="side?side_font">
<p?class="image"><img?src="images/1.jpg"?alt="圖片"?/></p>
<p?class="caption">麥兜我和我媽媽</p>
</div>
<!--?圖片背面?-->
<div?class="side?side_back">
<p?class="desc">描述信息</p>
</div>
</div>
</div>
</div>
</body>
</html>
2016-03-22
原來我是在html中的class內(nèi)的類名前多加了一個點（直接從樣式那復制過來的），真的快瘋?？戳撕镁胠e。。。
2016-07-28
啊啊 ? ?我把transform給拼錯了
2016-05-15
應該是</style>吧
2016-03-22
我的代碼，怎么弄都不對，把你的代碼復制下來結(jié)果是好的，我現(xiàn)在導師一個一個單詞對，看看到底哪里不對了，真是氣死我了！
2016-01-03
都沒有代碼下載，，看不了