介绍 & lt; view 类=& # 39;rotateCtn& # 39;, bindtap=& # 39; rotateFn& # 39;比;
,& lt; !——正面的框,——比;
,& lt; view 类=& # 39;frame {{class1}} & # 39;比;
& lt;才能https://www.yisu.com/zixun/image src=" {{vo.cover1}} ">
<视图类=爸{class2}}”>
<图像src=" {{vo.cover2}} ">
数据:,{
class1才能:& # 39;z1 # 39;,,//默认正面在上面
,,class2: & # 39; z2 # 39;
},
rotateFn:函数(e), {
let 才能;data =, this.data;
if 才能;(data.class1 ==, & # 39; z1 # 39;,,,, data.class2 ==, & # 39; z2 # 39;), {
,,this.run(& # 39;前# 39;,,& # 39;回# 39;,,& # 39;z2 # 39;,, & # 39; z1 # 39;);
,,},{else
,,this.run(& # 39;回# 39;,,& # 39;前# 39;,,& # 39;z1 # 39;,, & # 39; z2 # 39;);
,,}
},
,运行:函数(a, b, c,, d), {
let 才能;that =,;
that.setData({才能
,,class1:,,
,,,class2: b,
})才能
setTimeout(才能函数(),{
,,that.setData ({
,,,class1:, c,
,,,class2:,,
,,})
,,},1000);
}, 页面{高度:位置:,相对;100%;background:, # F6F6F6}
,
.rotateCtn{位置:,绝对的,宽度:,70%;高度:,70%;左:,15%;底:,20%;传输格式:preserve-3d;}
.frame{位置:,绝对的,高度:,100%;宽度:,100%;}
.frame 图像{宽度:高度:100%、100%;border - radius:, 8 px;}
.front{动画:front 1 s linear 1; backface-visibility:,隐藏;}
.back{动画:back 1 s linear 1;}
@keyframes 前{从{变换:rotateY(0度);},,{变换:rotateY(180度);}}
@keyframes 回{从{变换:rotateY(-180度);},,{变换:rotateY(0度);}}
.z1 {z - index: 6}
.z2 {z - index: 5}
今天就跟大家聊聊有关怎么在微信小程序中实现一个图片翻转效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
页面:
代码:
还有样式:
看完上述内容,你们对怎么在微信小程序中实现一个图片翻转效果有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。
