最近在开发原生的微信小程序页面，有一个点击翻转效果，百度了一下都是旋转和需求不符，以下是我实现翻转效果的代码：
wxml：
<view class='tcard' style=' transition: 2s; transform-style: preserve-3d; transform: rotateY({{cardjd}});'>
<!--正面-->
<view style='visibility:{{tcardzta}};transform: rotateY(180deg);' bindtap="cardfz" data-id="{{tcardsh}}">
<view class="ming_6" >
<image src="https://card2.mdsmos.com/we_chat/Uploads/2018-06-14/15289456849504.jpg" style='100%;' mode="widthFix"/>
</view>
</view>
<!--反面-->
<view bindtap="cardfz" data-id="{{tcardsh}}" style='display:{{tcardztb}}'>
<view class="chu_4" style="background-image: url('https://card2.mdsmos.com/we_chat/Public/Home/image/index_18.png');background-size:100% 100%;" >
背面
</view>
</view>
</view>
js:
data: {
tcardzta:'block',//初始卡片正面显示
tcardztb:'none',//初始卡片背面隐藏
cardjd:'180deg',
tcardsh:'1',
},
/**
* 点击翻转
*/
cardfz: function (e) {
var id = e.currentTarget.dataset.id;
//console.log(id);
var that=this;
if(id=='1'){
setTimeout(function () {
that.setData({tcardzta: 'none'});
}, 800);
setTimeout(function () {
that.setData({tcardztb: 'block',tcardsh:'2'});
}, 1000);
that.setData({cardjd: '0deg'});
}else{
setTimeout(function () {
that.setData({tcardztb: 'none'});
}, 600);
setTimeout(function () {
that.setData({tcardzta: 'block', tcardsh: '1'});
}, 1000);
that.setData({
cardjd: '180deg',
});
}
}
以上就是翻转效果实现的代码