HTML5纯css实现感应鼠标的翻牌动画特效
时间:2020-06-06 14:26 来源:网络
特效简介
大家有没有看到过网上很炫的翻牌效果，牌正面对着我们，然后点击一下，牌就被翻过来了，效果很酷炫，是不是很想知道是怎么实现的么，代码很简单，跟着小编往下走。
先给大家介绍一下翻牌的原理：
1、父容器设置设置perspective，让其子元素支持3d透视。
注：perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
2、牌正面和背面设置absolute属性，让正面的背面处于同一水平线上，用z-index属性设置背面朝上
3、让背面设置translateY(180)，沿y轴旋转180度，背面朝后，backface-visibility属性让背对屏幕的时候隐藏隐藏。
4、hover属性，当鼠标经过flip_wrap时，让flip沿y轴旋转180度，让正面绕y轴旋转180度到背面隐藏，背面沿y轴旋转180转到正面来。
原理就是这样
0
下载说明
· 本站下载链接均为网盘下载（百度网盘 & 微云网盘）；
· 推荐使用第三方专业下载工具下载本站软件，使用 WinRAR v3.10 以上版本解压本站软件；
· 如果这个软件总是不能下载的请点击报告错误,谢谢合作!!
· 下载本站资源，如果服务器暂不能下载请过一段时间重试！
· 本站提供的一些商业软件是供学习研究之用，如用于商业用途，请购买正版。