微信小程序-swiper卡牌切换、左右滑动、翻牌效果。

最近公司开发了一款偏向社交类的小程序，然后我们逼(sao)格(qi)特高的UI大神，在设计时，考虑到我们产品的特殊性，于是给每个上推荐的候选人设计了一种类似卡牌的交互效果。

但我们的功能实现还是比较简单的，只需要左右滑动切换卡牌，当前选中的卡牌适度放大突出显示，见下图。

具体实现效果，扫面下方小程序二维码查看(当前版本：v1.1.2)：

微信扫一扫，查看《我想找对象》小程序

but，后续整理代码的时候，突发奇想，又增加了一点小特效，实现一个翻牌效果。

具体用途的话，或许可以作为一个电影海报、刮卡活动等小程序交互使用。比如：支付宝的集五福。

下面是主要使用的方法、api等。

滑块功能：

    使用了微信小程序组件-滑块视图容器 Swiper (查看官方文档).

翻牌旋转效果：

    使用了Css3的一些属性：perspective、backface-visibility、transform等

perspective:3000rpx;  /*perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。*/
backface-visibility:hidden;  /*背对屏幕时隐藏*/
transform-style: preserve-3d;  /*子元素将保留其3D位置。*/
transform:rotateY(180deg);  /*定义沿着Y轴的3D旋转。*/

有想法的童鞋。可以参考《Css3实现翻牌效果》这个demo源码。

结合以上方法，最终实现效果如下：

我写的一个小范例（视频有点大，如加载慢，请多等会）。

如，视频无法播放，可以参看以下截图：

源码Demo下载地址：见右侧下载链接。

ps: 如源码Demo无法正常使用、改进意见、修改建议等，请评论留言，后续会不定期补充更新。