铁雪资源网 Design By www.gsvan.com
老规矩,先上图:
页面:
<view class='rotateCtn' bindtap='rotateFn'> <!--正面的框 --> <view class='frame {{class1}}'> <image src="/UploadFiles/2021-04-02/{{vo.cover1}}">代码:
data: { class1: 'z1', //默认正面在上面 class2: 'z2' }, rotateFn: function(e) { let data = this.data; if (data.class1 == 'z1' && data.class2 == 'z2') { this.run('front', 'back', 'z2', 'z1'); } else { this.run('back', 'front', 'z1', 'z2'); } }, run: function(a, b, c, d) { let that = this; that.setData({ class1: a, class2: b, }) setTimeout(function() { that.setData({ class1: c, class2: d, }) }, 1000); },还有样式:
page{position: relative;height: 100%;background-color: #F6F6F6} .rotateCtn{position: absolute;width: 70%;height: 70%;left: 15%;bottom: 20%;transform-style:preserve-3d;} .frame{position: absolute;height: 100%;width: 100%;} .frame image{height: 100%;width: 100%;border-radius: 8px;} .front{animation:front 1s linear 1;backface-visibility: hidden;} .back{animation:back 1s linear 1;} @keyframes front{from{transform: rotateY(0deg);} to{transform: rotateY(180deg);}} @keyframes back{from{transform: rotateY(-180deg);} to{transform: rotateY(0deg);}} .z1{z-index:6} .z2{z-index:5}总结
以上所述是小编给大家介绍的微信小程序实现图片翻转效果的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
标签:
微信小程序图片翻转,小程序翻转
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无微信小程序实现图片翻转效果的实例代码的评论...