点击没有翻转
来源：2-3 3D效果编写
慕前端1243435
2018-12-30 21:17
为什么我的没有翻转呢 当点击的时候 class名字没有改变 还是原来的 'photo_front'
写回答
关注
1回答
-
- 慕侠2155777
- 2019-01-02 14:58:42
图片界面样式，
.photo-front .photo-wrap .side-front{
-webkit-transform: rotateY(360deg);
}
.photo-front .photo-wrap .side-back{
-webkit-transform: rotateY(180deg);
}
描述界面样式
.photo-back .photo-wrap .side-front{
-webkit-transform: rotateY(180deg);
}
.photo-back .photo-wrap .side-back{
-webkit-transform: rotateY(0deg);
}
通过点击含有photo这个类的标签 动态来回添加.photo-front和.photo-back
jq代码
$(".photo").click(function(){
if($(this).hasClass("photo-front")==true){
$(this).removeClass("photo-front");
$(this).addClass("photo-back");
}else{
$(this).addClass("photo-front");
$(this).removeClass("photo-back");
}
})
CSS3+JS 实现超炫的散列画廊特效
实现更自由的切换照片的画廊效果，打造超酷的切换动画
46090 学习 · 215 问题
相似问题