使用css3实现3 d翻牌效果的方法 - 行业资讯 - 肥雀云

　　介绍

这篇文章将为大家详细讲解有关使用css3实现3 d翻牌效果的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

所谓的翻牌效果就是看起来将图片沿y轴着翻转的效果。

首先我们要清楚的是,原本设定的就有两个大小相同的div,并不是只有一个!然后我们需要将两个div重合,使用位置:绝对语句实现上下摆放的div重合在一起。

接下来我们要让第一个div沿着y轴旋转起来,这里我们会用到变换:rotageY(-180度)语句实现,同时我们要区别两个div,让其中一个div旋转180度的同时,另外一个旋转0度。

最后当旋转180度的div完成旋转时,我们将它隐藏起来,使用backface-visibility:隐藏;语句实现图片转到显示屏看不见的地方就消失的功能。

<>强ps:如果有小伙伴不清楚以上内容可以查询本站内的相关文章。

如何使用css3制作圆形旋转动画(附完整代码)

& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　& lt;元charset=皍tf-8"祝辞　　& lt;元名称=皏iewport"内容=?device-width"宽度比; 　　& lt; title> & lt;/title> 　　https://www.yisu.com/zixun/& lt;脚本src=" http://7xiyzi.com2.z0.glb.qiniucdn.com/20160409_weixinjquery-2.1.0.min.js?我=6 " type=" text/javascript“charset=" utf - 8 "> 　　头　　身体<> 　　

　　　　　　<时尚> 　　.div1 { 　　宽度:185 px; 　　身高:251 px; 　　-webkit-transform-style: preserve-3d; 　　-ms-transform-style: preserve-3d; 　　-o-transform-style: preserve-3d; 　　传输格式:preserve-3d; 　　-webkit-transition:所有400 ms线性; 　　过渡:所有400 ms线性; 　　} 　　.div1。div2 { 　　-webkit-transform: rotateY(180度); 　　-ms-transform: rotateY(180度); 　　变换:rotateY(180度); 　　backface-visibility:隐藏; 　　} 　　img { 　　宽度:185 px; 　　身高:251 px; 　　}> 　　$ (' .div1) .click (()=> { 　　$ (' .div1 ') .addClass (“div2”) 　　}）　　

关于使用css3实现3 d翻牌效果的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。