V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
Mascdo
V2EX  ›  CSS

一个前端的问题,实现正反两面翻转

  •  
  •   Mascdo · 2018-08-26 01:54:42 +08:00 · 3926 次点击
    这是一个创建于 2283 天前的主题,其中的信息可能已经有所发展或是发生改变。

    就是一个组块,有正面,和反面,都可以往里面塞东西,通过外面的一个按钮进行翻转。

    https://davidwalsh.name/demo/css-flip.php 我参考了里面的代码,发现它是通过 hover 实现的,但是又不想鼠标放上去就翻面。

    https://www.html5tricks.com/demo/jquery-css3-image-rotate/index.html 然后又参考了这个,是 jquery+css 实现的,发现它是通过给元素添加类以后动态实现的。

    我本来想结合两者的特点自己写出来,无奈基础不太好,写了一天也没写出什么头绪,不知道哪位大哥有类似的 demo 给借鉴一下啊。

    10 条回复    2018-08-26 13:10:00 +08:00
    toma77
        1
    toma77  
       2018-08-26 04:53:42 +08:00
    jquery 的 trigger()了解一下
    NickCarter
        2
    NickCarter  
       2018-08-26 08:13:33 +08:00 via iPhone
    transform

    backface-visibility
    igoist
        3
    igoist  
       2018-08-26 09:22:08 +08:00   ❤️ 1
    https://github.com/igoist/Web/tree/master/demos/3D/demo0004

    你说基础不好,怕你不晓得 scss ;晓得的话自己 sass 编译一下

    不然把第 7 - 12 行的

    .flip-container {
    perspective: 1000px;
    .flipper.flip {
    transform: rotateY(180deg);
    }
    }

    改成

    .flip-container {
    perspective: 1000px;
    }

    .flipper.flip {
    transform: rotateY(180deg);
    }

    再把文件名后缀 .scss 改成 .css 就好
    记得在 index.html 里面把 .front img 与 .back img 的图片地址改一下
    Mascdo
        4
    Mascdo  
    OP
       2018-08-26 10:29:50 +08:00
    @toma77 我已经尝试过了,不知道是不是自己的问题,还是弄不好啊。
    Mascdo
        5
    Mascdo  
    OP
       2018-08-26 10:33:03 +08:00
    @igoist 好的,我先去试试。一看你的代码也是研究过这个问题的啊哈哈。
    xxx749
        6
    xxx749  
       2018-08-26 10:37:36 +08:00 via Android
    参考 2l

    父元素
    -子元素正面
    -子元素反面

    子元素 backface-visibility: hidden,反面默认 transform: rotateY(-180deg)

    事件触发后给父元素添加 class

    子元素 css 类似这样
    (新添加的父元素 className)空格(子元素 className){这里进行 rotate 数值的变换}

    反面由负数改为 0 即可
    Mascdo
        7
    Mascdo  
    OP
       2018-08-26 11:42:24 +08:00
    @igoist OK,已经成功了,感谢!
    Mascdo
        8
    Mascdo  
    OP
       2018-08-26 11:43:00 +08:00
    @xxx749 谢谢提供思路,借助楼上的 demo 我已经完成了
    rabbbit
        9
    rabbbit  
       2018-08-26 11:43:47 +08:00   ❤️ 1

    Mascdo
        10
    Mascdo  
    OP
       2018-08-26 13:10:00 +08:00
    @rabbbit 感谢,代码和效果都好完整。你发的时候我刚好自己做出来。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4298 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 04:11 · PVG 12:11 · LAX 20:11 · JFK 23:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.