最近我在学习有关css3的相关知识，真心觉得这是一门非常实用且炫酷的技术，不仅可以代替以前图片表现的图案和形状，还可以制作一些特殊的效果。比如阴影效果、渐变效果等，其中3d转换效果尤为炫酷。本篇文章给大家带来的内容是关于如何使用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的翻牌效果的代码
PHP中文网 .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;}$('.div1').click(() => {$('.div1').addClass('div2')})@@##@@
效果如图所示
以上就是如何使用css3实现3D的翻牌效果（附完整代码）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1612169.html
微信扫一扫 
支付宝扫一扫 
