点击没有翻转效果

来源:3-1 简单翻转控制

慕前端1243435

2018-12-30 21:27

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>海报画廊</title>

<style>

*{

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: #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: preserve-3d;

-webkit-transition: all .6s;


}

.photo-wrap .side-front{

-webkit-transform:rotateY(0deg);

}

.photo-wrap .side-back{

-webkit-transform:rotateY(180deg);

}

.photo-wrap .side{

-webkit-backface-visibility: hidden;

}

.photo_front .photo-wrap{

-webkit-transform:rotateY(0deg);

}

.photo_back .photo-wrap{

-webkit-transform:rotateY(180deg);

}

</style>

</head>

<body onselectstart="return false;">         <!--防止页面文字被选中-->

<div class="wrap">

<div id="one" class="photo photo_center photo_front" onclick="fn(this)">


<div class="photo-wrap">

<div class="side side-front">

<p class="image"><img src="image/dududu.jpg" /></p>

<p class="caption">你就是一个小歘歘</p>

</div>

<div class="side side-back">

<p class="desc">描述信息</p>

</div>

</div>

</div>


</div>


<script>

function fn(elem){


var ss = elem.className;

if(/photo_front/.test( ss ) ){

ss = ss.replace(/'photo_front'/,'photo_back') //正面变成背面

}else{

ss = ss.replace(/'photo_back'/,'photo_front')

}

return elem.className=ss;

}

</script>

</body>

</html>


写回答 关注

1回答

  • 慕前端1243435
    2018-12-30 21:54:56

    替换的时候多加了  '   '   了

CSS3+JS 实现超炫的散列画廊特效

实现更自由的切换照片的画廊效果,打造超酷的切换动画

46090 学习 · 215 问题

查看课程

相似问题