老规矩,先上图:
页面:
<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}总结
以上所述是小编给大家介绍的微信小程序实现图片翻转效果的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
最新资源
- 【中国民乐】张维良《秋江夜泊》2004[FLAC+CUE]
- 明达年度发烧碟MasterSuperiorAudiophile2011[D
- 明达年度发烧碟MasterSuperiorAudiophile2017[D
- 翁立友.2008-恨孤单【大旗】【WAV+CUE】
- 群星.2009-Magic.Cover日粤精华3CD【环球】【WA
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][5
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量