课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

没有翻转效果

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

qq_逃_5

2016-12-30 16:05


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>海报画廊</title>

<style type="text/css">

* {padding: 0; margin: 0;}

body {background: #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; perspective: 800px;/* 能够看出x，y轴旋转效果*/}


/* 海报样式 */

.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: #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%; transform-style: preserve-3d;}

.photo-wrap .side-front{transform: rotateY(0deg);}

.photo-wrap .side-back{transform: rotateY(180deg);}

.photo-wrap .side {backface-visibility: hidden;}


.photo_front .photo-wrap{transform: rotateY(0deg);}

.photo_back .photo-wrap{transform: rotateY(180deg);}

</style>

</head>

<body onselectstart="return false;">

<div>

<!-- photo 负责平移、旋转 -->

<div class="photo photo_center photo_front" onclick="turn(this)">


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

<div>

<div class="side side-front">

<p><img src="../img/text.jpg" style="height: 600px;"></p>

<p>万圣节狂欢派对</p>

</div>

<div class="side side-back">

<p>描述信息</p>

</div>

</div>

</div>

</div>

</body>

</html>

<script type="text/javascript">

// 1，翻面控制 

function turn(elem) {

var cls = elem.className;

if (/photo_front/.test( cls ))

// 正则表达式： 检测传入的className中是否有photo_front

{

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

}else{

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

}

return elem.className = cls;

}

</script>


写回答 关注

1回答

  • qq_梦屿千寻_3
    2017-01-14 15:46:02

    我也跟你一样，加入的js代码没有卵用，谷歌和火狐都没有效果。

    0 0

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

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

46091 学习 · 215 问题

查看课程

相似问题

没有3d翻转效果

回答 2

点击没有翻转效果

回答 1

图片翻转效果

回答 5

有没有人发现图片翻转的时候没有3D效果了。。。

回答 3

为什么我点击鼠标没有翻转效果，郁闷！

回答 6

打开慕课网App查看更多内容