老规矩，先上图：

页面：

view class=' RotarTextn ' bind tap=' RotarTefn '！-正面的框-查看框架{ { class 1 } } '图像src=' http : { { VO。封面1 } } '/图片/视图！-背面的框-查看框架{{class2}} '图像src=' http : { { VO。封面2 } } '/图像/视图/视图代码：

data: { class1: 'z1 '，//默认正面在上面class2: 'z2' }，rotateFn:函数(e) {让data=this.dataif(数据。类别1=' Z1 '数据。class 2=' z2 '){这个。跑步('前'，'后'，' z2 '，' Z1 ')；} else { this.run('back '，' front '，' z1 '，' z2 ')；} }，run:函数(a、b、c、d) {让那个=这个；that.setData({ class1: a，class2: b，})setTimeout(function(){ that。setdata({ class 1: c，class2: d，}) }，1000)；},还有样式：

第{位置：页相对；高度： 100%;背景-颜色： # F6 } .rotateCtn { position:绝对值；宽度： 70%;高度： 70%;左侧： 15%;底部： 20%;变换样式： preserve-3d；}.框架{位置：绝对；高度： 100%;宽度： 100%;}.帧图像{身高： 100%；宽度： 100%;边界半径： 8px}.front { animate : front 1s linear 1；背面-可见性：隐藏；}.back { animate : back 1s linear 1；} @ from { transform : Rotatey(0度)前的关键帧；}到{ transform : Rotatey(180)；} } @个关键帧返回{来自{ transform : Rotatey(-180)；}到{ transform : Rotatey(0度)；} .Z1 { z指数：6 }。z2 { z-index :5 }总结

以上所述是小编给大家介绍的微信小程序实现图片翻转效果的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！