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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 2280 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

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

翻转

组块

实现

jquery

10 条回复 • 2018-08-26 13:10:00 +08:00

toma77

2018-08-26 04:53:42 +08:00

jquery 的 trigger()了解一下

NickCarter

2018-08-26 08:13:33 +08:00 via iPhone

transform

backface-visibility

igoist

2018-08-26 09:22:08 +08:00

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

2018-08-26 10:29:50 +08:00

@toma77 我已经尝试过了，不知道是不是自己的问题，还是弄不好啊。

Mascdo

2018-08-26 10:33:03 +08:00

@igoist 好的，我先去试试。一看你的代码也是研究过这个问题的啊哈哈。

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

2018-08-26 11:42:24 +08:00

@igoist OK，已经成功了，感谢！

Mascdo

2018-08-26 11:43:00 +08:00

@xxx749 谢谢提供思路，借助楼上的 demo 我已经完成了

rabbbit

2018-08-26 11:43:47 +08:00

Mascdo

2018-08-26 13:10:00 +08:00

@rabbbit 感谢，代码和效果都好完整。你发的时候我刚好自己做出来。