微信小程序点击翻转到背面效果

最近在开发原生的微信小程序页面，有一个点击翻转效果，百度了一下都是旋转和需求不符，以下是我实现翻转效果的代码：

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',

       });

    }

}

以上就是翻转效果实现的代码