html 如何制作翻牌效果,使用css3实现3D翻牌效果的方法

使用css3实现3D翻牌效果的方法

发布时间：2020-09-14 11:55:16

来源：亿速云

阅读：142

作者：小新

这篇文章将为大家详细讲解有关使用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的翻牌效果的代码

亿速云

.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翻牌效果的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。