老师 我只能翻转出一面来 ，背面总是挡住我的正面，把它设为display:none；后翻转过后什么都没有，唉 弄一天了，麻烦老师在百忙中看下。谢谢老师
慕雪5561863
2018-12-04 14:23
<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;/*子元素获得3D旋转效果*/
}
/*海报样式*/
.photo{
width:260px;
height:320;
position:absolute;
z-index: 1;
box-shadow: 0 0 1px rgba(0,0,0,.01);/*阴影 rgba是颜色设置，最后一个参数是透明度*/
}
/*背景面*/
.photo .side{
width:100%;
height:100%;
background-color: #eee;
position:absolute;
top:0;
right:0;
padding:20px;
box-sizing:border-box;/*width和height和padding三者结合的结果都会在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 .desc{
color:#666;
font-size:14px;
line-height:1.5em;
}
/*当前选中的海报样式*/
.photo_center{/*中间的图片*/
left:50%;/*水平垂直居中*/
top:50%;
margin:-160px 0 0 -130px;
z-index: 999;/*一般为1 为防止中间的照片被其他的挡住，设置为999*/
}
.photo .side-back{}
/*负责翻转*/
.photo-wrap{
position:absolute;
width:100%;
height:100%;
-webkit-transform-style:preserve-3d;
/*让photo-wrap所有子元素都继承3D效果*/
-webkit-transition:all .7s;
/*翻转20度*/
}
.photo-wrap .side-front{
-webkit-transform: rotateY(0deg);
}
.phpto-wrap .side-back{
-webkit-transform:rotateY(180deg);
}
.photo-wrap .side{
-webkit-backface-visibility:hidden;
}
.photo_front .photo-wrap{
-webkit-transform: rotateY(0deg);
}
/*影响photo-wrap的效果 控制photo-wrap去翻转*/
.photo_back .photo-wrap{
-webkit-transform: rotateY(180deg);
}
/*将海报抽象为具体，相当于真实生活中的海报*/
</style>
</head>
<body onselectstart="return false;">
<div class="wrap"><!--这里是背景墙-->
<!--photo photo_center负责平移 和旋转-->
<!--绕着Y旋转30° 平面上-->
<div class="photo photo_center photo_front" onclick="turn(this)"><!--照片墙-->
<!--photo-wrap负责3D旋转-->
<div class="photo-wrap">
<div class="side side-front"> <!--照片墙正面-->
<p class="image"><img src="图片/1.jpg"/></p><!--正面的内容-->
<p class="caption">康定</p><!--照片的描述-->
</div>
<div class="side side-back" style="display:none">
<p class="desc" >描述信息</p>
</div><!--照片的背面-->
</div>
</div>
</div>
1回答
-
- 慕姐9082175
- 2019-06-15 16:18:57
今明额嗯
CSS3+JS 实现超炫的散列画廊特效
46090 学习 · 215 问题
相似问题