点击没有翻转

来源: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");

    }

    })


    慕侠2155...

    那就是你的js写错了,类名不更换肯定不会旋转,因为样式没改变

    2019-01-02 14:59:41

    共 1 条回复 >

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

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

46091 学习 · 215 问题

查看课程

相似问题