如何使用css3实现3D的翻牌效果（附完整代码）
导读：使用css3实现3D的翻牌效果的原理 所谓的翻牌效果就是看起来将图片沿着y轴翻转的效果。 首先我们要清楚的是，原本设定的就有两个大小相同的div，并不是只有一个！然后我们需要将两个div重合，使用position：absolute语...
使用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:all400mslinear;
transition:all400mslinear;
}
.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')
}
)
本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何使用css3实现3D的翻牌效果（附完整代码）
本文地址： https://pptw.com/jishu/664566.html