誰能幫忙解決下這個問題了：只顯示正面
.photo-wrap .side{
-webkit-backface-visibility:hidden;
}
還是只顯示正面，？？？？？
qq_琉櫻_0
2017-02-24
2 回答
舉報
0/150
提交
取消
2017-05-16
你這也沒有實現(xiàn)翻轉(zhuǎn)之后顯示描述信息啊?。。?/p>
2017-02-24
<!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>
*{ padding:0; margin:0;}
body{
background-color:#fff;
color:#555;
font-size:14px;
font-family:'Avenir Next','Lantinghei SC';
-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{}
.photo .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:perserve-3d;
-webkit-transition:all .6s;
}
.photo-wrap .side{
-webkit-backface-visibility:hidden;
}
.photo-wrap .side-front{
-webkit-transform:rotateY(0deg);
}
.photo-wrap .side-back{
-webkit-transform:rotateY(180deg); /*旋轉(zhuǎn)*/
}
.photo_front .photo-wrap{/* .photo_front 是添加到 div.photo 的類 */
-webkit-transform:rotateY(0deg);
}
.photo_back .photo-wrap{/* .photo_back 是添加到 div.photo 的類*/
-webkit-transform:rotateY(180deg);
}
</style>
</head>
<body>
<div class="wrap">
? <!--photo負責平移和旋轉(zhuǎn)-->
<div class="photo photo_center photo_back">
? ? ?<!-- photo-wrap 負責翻轉(zhuǎn)-->
? ? ? <div class="photo-wrap">
? ? <div class="side side-front">
? ? ? ? <p class="image">
? ? ? ? ? ? ? ?<img src="imgs/1.jpg" />
? ? ? ? ? ? </p>
? ? ? ? ? ? <p class="caption">
? ? ? ? ? ? ? ?名字
? ? ? ? ? ? </p>
? ? ? ? </div>
? ? ? ? <div class="side side-back">
? ? ? ? <p class="desc">描述信息</p>
? ? ? ? </div>
? ? ? </div>
? ? </div>
</div>
</body>
</html>
這是代碼了！