如何使用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的翻牌效果的代码

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<metaname="viewport"content="width=device-width">

<title>PHP中文网</title>

<scriptsrc="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>

<divclass="div1">

<divclass="div2">

<imgsrc="http://static.wesai.com/files/upload/9/bd9/feeae/9bd9dfeeaee3b9be37a3ad4e75fe7004.jpg">

</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:all400mslinear;

transition:all400mslinear;

}

.div1.div2{

-webkit-transform:rotateY(180deg);

-ms-transform:rotateY(180deg);

transform:rotateY(180deg);

backface-visibility：hidden;

}

img{

width:185px;

height:251px;

}

</style>

<scripttype="text/javascript">

$('.div1').click(()=>{

$('.div1').addClass('div2')

})

</script>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/rumen/r57231.shtml