为什么我的只能图片一面镜像变换，而不是跳到photo_back面啊？
spring_fish
2015-05-14 00:40
.photo-wrap{
position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style:perserve-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 class="photo photo_center photo_front" onclick="turn(this)">
<!--负责翻转的div-->
<div class="photo-wrap">
<div class="side side-front">
<p class="image"><img src="p1.jpg"></p>
<p class="caption">小白人</p>
</div>
<div class="side side-back">
<p class="desc">描述信息</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//1.翻面控制
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;
}
1回答
-
- spring_fish
- 2015-05-14 00:59:35
用的也是google浏览器
CSS3+JS 实现超炫的散列画廊特效
46091 学习 · 215 问题
相似问题
回答 2
回答 2