没有翻转效果

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

没有翻转效果

<!DOCTYPE html>

<html>

<head>

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

<div>

<div>

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

</div>

</div>

</body>

</html>

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

提问者：qq_逃_5 2016-12-30 16:05

没有翻转效果

个回答