为什么没有效果呢？

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

为什么没有效果呢？

<!DOCTYPE html>

<html>

<head>

*{padding: 0;margin: 0;}

body{background-color: #fff;color: #555;font-family: 'Avenir Next','Lantinghei SC'; font-size: 14px;-webkit-font-smoothing:antialiased;-moz-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 .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%;width: 260px;height: 320px;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>

<div>

<div >

</div>

</div>

// 页面翻转

function turn(elem){

var cls=elem.className;

if(/photo_front/.test("cls")){

cls=cls.replace(/photo_front/,"photo_back");

}else{

cls=cls.replace(/photo_back/,"photo_front");

}

return elem.className=cls;

}

</script>

</body>

</html>

提问者：成长前端初学者 2016-11-30 22:04

为什么没有效果呢？

个回答