效果如图,正反面分别写两个元素,布局让两个元素重叠
wxml的代码:
<view class='rotateCtn'>
<!--正面的框 -->
<view class='{{frameClass1}}' data-id='1' bindtap='rotateFn' style='background-color:yellow'>
正面
</view>
<!--背面的框 -->
<view class='{{frameClass2}}' bindtap='rotateFn' style='background-color:red'>
反面
</view>
</view>
preserve-3d可以显示元素的3d示wxss代码:
.rotateCtn{width: 100%;transform-style:preserve-3d;position:relative;}
.frame{width: 40%;height: 360rpx;position: absolute;}
.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}
js代码:
data: {
frameClass1:'frame z1',//默认正面在上面
frameClass2: 'frame z2'
},
rotateFn: function (e) {
var that = this
if (this.data.frameClass1=='frame z1'&&
this.data.frameClass2=='frame z2'){
that.setData({
frameClass1: "frame front",
frameClass2: "frame back",
})
setTimeout(function () {
that.setData({
frameClass1: "frame z2",
frameClass2: "frame z1",
})
}, 1000);
}
else{
that.setData({
frameClass1: "frame back",
frameClass2: "frame front",
})
setTimeout(function () {
that.setData({
frameClass1: "frame z1",
frameClass2: "frame z2",
})
}, 1000);
}
},
前端新人+菜鸟,有问题评论区讨论一下哦