为了账号安全,请及时绑定邮箱和手机立即绑定

谁能帮忙解决下这个问题了:只显示正面

.photo-wrap .side{

-webkit-backface-visibility:hidden;

}

还是只显示正面,?????

正在回答

2 回答

你这也没有实现翻转之后显示描述信息啊!!!

0 回复 有任何疑惑可以回复我~

<!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); /*旋转*/

}

.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负责平移和旋转-->

<div class="photo photo_center photo_back">

     <!-- photo-wrap 负责翻转-->

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


这是代码了!

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

谁能帮忙解决下这个问题了:只显示正面

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信