欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

如何使用css3实现3D的翻牌效果(附完整代码)

程序员文章站 2022-03-05 22:46:19
...
最近我在学习有关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的翻牌效果的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>PHP中文网</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的翻牌效果(附完整代码)如何使用css3实现3D的翻牌效果(附完整代码)

以上就是如何使用css3实现3D的翻牌效果(附完整代码)的详细内容,更多请关注其它相关文章!

相关标签: 翻牌效果 css3