这篇文章将为大家详细讲解有关使用css3实现3D翻牌效果的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
使用css3实现3D的翻牌效果的原理
所谓的翻牌效果就是看起来将图片沿着y轴翻转的效果。
首先我们要清楚的是，原本设定的就有两个大小相同的div，并不是只有一个！然后我们需要将两个div重合，使用position：absolute语句实现上下摆放的div重合在一起。
接下来我们要让第一个div沿着y轴旋转起来，这里我们会用到transform：rotageY（-180deg）语句实现，同时我们要区别两个div，让其中一个div旋转180deg的同时，另外一个旋转0deg。
最后当旋转180deg的div完成旋转时，我们将它隐藏起来，使用backface-visibility：hidden；语句实现图片转到显示屏看不见的地方就消失的功能。
ps：如果有小伙伴不清楚以上内容可以查询本站内的相关文章。
如何使用css3制作圆形旋转动画（附完整代码）
使用css3实现3D的翻牌效果的代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>亿速云</title> <script src="http://7xiyzi.com2.z0.glb.qiniucdn.com/20160409_weixinjquery-2.1.0.min.js?i=6" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="div1"> <div class="div2"> <img src="http://static.wesai.com/files/upload/9/bd9/feeae/9bd9dfeeaee3b9be37a3ad4e75fe7004.jpg"> </div> </div> </body> </html> <style> .div1 { width: 185px; height: 251px; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 400ms linear; transition: all 400ms linear; } .div1.div2 { -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); backface-visibility：hidden; } img { width: 185px; height: 251px; } </style> <script type="text/javascript"> $('.div1').click(() => { $('.div1').addClass('div2') }) </script>
效果如图所示
关于使用css3实现3D翻牌效果的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
