今天就跟大家聊聊有关怎么在微信小程序中实现一个图片翻转效果，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
页面：
计算
安全
数据库
网络和加速
企业服务
<view class='rotateCtn' bindtap='rotateFn'>
<!--正面的框 -->
<view class='frame {{class1}}'>
<image src="{{vo.cover1}}"></image>
</view>
<!--背面的框 -->
<view class='frame {{class2}}'>
<image src="{{vo.cover2}}"></image>
</view>
</view>代码：
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}看完上述内容，你们对怎么在微信小程序中实现一个图片翻转效果有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
