<view class="main_border">
                <view class="inside_border viewport-flip">
                    <block wx:for="{{position}}">
                        <view class="parent_border flip {{flipArr[index]?'out':'in'}}" style="left:{{item.x}};top:{{item.y}};" animation="{{objArr[index].animationData}}"
                            data-idx="{{index}}"  hover-class="opacity">
                            <form report-submit class="sec_border border_{{index}} gifts_back centerBtn" bindsubmit="{{isMember?'click':'openCard'}}"  style="display:block" wx:if="{{isClick && index ==4}}">
                                <button class="" form-type="submit" style="width:100%;height:100%;opacity:0"></button>
                            </form>
                            <view class="sec_border border_{{index}} gifts_back {{isClick?'centerBtn':''}}" bindtap="{{isClick?'':'btnFlip'}}"
                                data-index="{{index}}" wx:else>                                
                                
                            </view>                            
                        </view>                        
                    </block>
       </view>
</view>

.main_border{
? .inside_border{
? ? margin: 0 auto;
? ? width: 639rpx;
? ? height: 639rpx;
? ? position: relative; ? ?
? ? .parent_border{
? ? ? position:absolute;
? ? ? height:203rpx;
? ? ? width: 203rpx;
? ? }
? }
}
?
.sec_border{
? ? width: 100%;
? ? height: 100%;?
? .gifts_img{
? ? display:none;
? ? width: 100%;
? ? height: 100%;
? ??
? }
}
?
.gift-animat{
? ? display: block;
}
?
?
?
// 翻牌動(dòng)畫
.viewport-flip {
? ? -webkit-perspective: 1000;
? ? perspective: 1000;
? ? position: absolute;
}
.flip {
? ? -webkit-backface-visibility: hidden;
? ? -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
? ? backface-visibility: hidden;/*backface-visibility 屬性定義當(dāng)元素不面向屏幕時(shí)是否可見(jiàn)*/
? ? transform: translateX(0);
? ? position: fixed;
}
.flip.out {
? ? -webkit-transform: rotateY(-90deg) scale(.9);
? ? -webkit-animation-name: flipouttoleft;
? ? -webkit-animation-duration: 175ms;
? ? transform: rotateY(-90deg) scale(.9);
? ? animation-name: flipouttoleft;
? ? animation-duration: 175ms;
}
?
.flip.in {
? ? -webkit-animation-name: flipintoright;
? ? -webkit-animation-duration: 225ms;
? ? animation-name: flipintoright;
? ? animation-duration: 225ms;
}
?
@keyframes flipouttoleft {
? ? from { -webkit-transform: rotateY(0); }
? ? to { -webkit-transform: rotateY(-90deg) scale(.9); }
}
?
.flip.outA {
? ? // -webkit-transform: rotateY(-90deg) scale(.9);
? ? // -webkit-animation-name: flipouttoleft;
? ? // -webkit-animation-duration: 175ms;
? ? transform: rotateY(0deg) scale(1);
? ? animation-name: flipouttoleftA;
? ? animation-duration: 1000ms;?
? ? top:0 !important;
? ? left: 0 !important;
? ? width: 640rpx !important;
? ? height: 700rpx !important;
? ? z-index: 999999;
}
@keyframes flipouttoleftA {
? ? 0% {?
? ? ? ? transform: rotateY(0);?
? ? }
? ? 50% {
? ? ? ?transform: rotateY(-90deg) scale(1); ?
? ? }
? ? 100% {?
? ? ? ? transform: rotateY(0deg) scale(1);?
? ? ? ? top:0;
? ? ? ? left: 0;
? ? ? ? width: 640rpx;
? ? ? ? height: 700rpx;
? ? }
}
?
?
@keyframes flipintoright {
? ? from { transform: rotateY(90deg) scale(.9); }
? ? to { transform: rotateY(0); }
}

const widthFa = 639;
const heightFa = 639;
const widthChil = 203;
const heightChil = 203;
?
position: [
? ? ? { x: '0rpx', y: '0rpx', btn: true },
? ? ? { x: `${widthChil + 15 ?}rpx`, y: '0rpx', btn: true },
? ? ? { x: `${widthFa - widthChil ?}rpx`, y: '0rpx', btn: true },
? ? ? { x: '0rpx', y: `${widthChil + 15 ?}rpx`, btn: true },
? ? ? { x: `${widthChil + 15 ?}rpx`, y: `${widthChil + 15 ?}rpx`, btn: true },
? ? ? { x: `${widthFa - widthChil ?}rpx`, y: `${widthChil + 15 ?}rpx`, btn: true },
? ? ? { x: '0rpx', y: `${widthFa - widthChil ?}rpx`, btn: true },
? ? ? { x: `${widthChil + 15 ?}rpx`, y: `${widthFa - widthChil ?}rpx`, btn: true },
? ? ? { x: `${widthFa - widthChil ?}rpx`, y: `${widthFa - widthChil ?}rpx`, btn: true },
? ? ],

flipArr[index] = !flipArr[index]; ? ? ?
?
that.setData({
? ? ?flipArr, ? ? ? ? ?
? ? ?isFlip: false
});