这篇文章将为大家详细讲解有关在HTML5移动端怎么实点击翻牌效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

一个大小的两个面，在同一位置上

正面的Y轴旋转为0度

背面的Y轴旋转180度

隐藏被旋转的 div 元素的背面（backface-visibility）

点击的时候同时改变正面和背面的旋转角度，给一个动画的时间（transition）

记得换图片路径哦~

<!doctypehtml><html><head><metacharset="utf-8"><title>css3翻牌</title></head><body><style>*{margin:0;padding:0;}ul,li{margin:0;padding:0;list-style:none;}.flip-container,.front1,.back1{width:283px;height:283px;}.front1,.back1{position:absolute;top:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:0.6sease-out;-webkit-transition:.6sease-out;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;}.front1img,.back1img{width:283px;height:283px;overflow:hidden;}.front1{z-index:2;transform:rotateY(0deg);-webkit-transform:rotateY(0deg);}.back1{z-index:1;transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);}.back2{transform:rotateY(0deg);-webkit-transform:rotateY(0deg);z-index:2;}.front2{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);z-index:1}</style><ul><liclass="flip-container"><divclass="front1flipper"><imgsrc="./快捷方式/壁纸/2.jpg"></div><divclass="back1flipper"><imgsrc="./快捷方式/壁纸/1.jpg"></div></li></ul></body><scriptsrc="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>letis1=true;document.getElementsByClassName('flip-container')[0].onclick=function(){if(is1){$(this).find('.front1').addClass('front2');$(this).find('.back1').addClass('back2');}else{$(this).find('.front1').removeClass('front2');$(this).find('.back1').removeClass('back2');}is1=!is1;}</script></html>

关于“在HTML5移动端怎么实点击翻牌效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。