jQuery翻牌子抽奖效果（已知结果）

描述：在八个紫色背景中随机点击一个，将抽中的礼物插入数组（另外七个礼物）中，
点击的位置翻转，展示礼物，
1s后其他七个翻转，剩余的七个礼物会按顺序填满其他七个位置
（样式参考来源：https://www.likecs.com/show-459057.html）

效果图：点击前——

 点击后——

 html部分：

<div class="exchange_result_bg" id="brand_result_pop">
    <div class="brand_pop popIn">
        <div class="brand_div clearfix brand_div1" id="brand_div">
            <!-- 牌子数据 -->
        </div>
    </div>
</div>

js部分：

    $(function(){
        var gifts = [
            {"giftId": 1, "url": "","name": "礼物1", "price": 10}, 
            {"giftId": 2, "url": "","name": "礼物2", "price": 20}, 
            {"giftId": 3, "url": "","name": "礼物3", "price": 30}, 
            {"giftId": 4, "url": "","name": "礼物4", "price": 40}, 
            {"giftId": 5, "url": "","name": "礼物5", "price": 50}, 
            {"giftId": 6, "url": "","name": "礼物6", "price": 60}, 
            {"giftId": 7, "url": "","name": "礼物7", "price": 70}, 
            {"giftId": 8, "url": "","name": "礼物8", "price": 80}, 
        ]
        var myMoLiGifts = gifts;//获取所有精灵礼物
        var giftHtml = '';
        // 默认展示 牌子不带礼物信息
        if (myMoLiGifts.length > 0) {
            for(var i = 0;i < myMoLiGifts.length;i++){
                giftHtml += brandHtmlNoMB.replace(/\{\{index\}\}/g, (i+1))
            }
        }
        $("#brand_div").html(giftHtml);
    });
    //抽奖 动作
    function funcGiftsTrendsData(clickIndex){
        // 调接口获取抽奖结果
            var data = {
                    "giftName": {
                        "{\"giftName\":\"抽到的礼物\", \"giftUrl\":\"1\", \"giftCoin\":10, \"giftId\":8}": 1
                    },
                    "otherGift": [
                        {"giftName": "礼物1","giftUrl": "","giftCoin": 10,"giftId": "1"}, 
                        {"giftName": "礼物2","giftUrl": "","giftCoin": 20,"giftId": "2"}, 
                        {"giftName": "礼物3","giftUrl": "","giftCoin": 30,"giftId": "3"}, 
                        {"giftName": "礼物4","giftUrl": "","giftCoin": 40,"giftId": "4"}, 
                        {"giftName": "礼物5","giftUrl": "","giftCoin": 50,"giftId": "5"}, 
                        {"giftName": "礼物6","giftUrl": "","giftCoin": 60,"giftId": "6"}, 
                        {"giftName": "礼物7","giftUrl": "","giftCoin": 70,"giftId": "7"},
                    ]
                }
            if (data.hasOwnProperty('msg')) {
                tankuang(data.msg);// 失败返回
            } else if (data.hasOwnProperty('giftName')) {
                //后台返回 该抽中的礼物
                var giftName = data.giftName , dataList;
                $.each(giftName,function(key,value){
                    dataList = $.parseJSON(key);
                });
                var dataAll = data.otherGift;
                // 加入选中礼物后 按照点击的位置 重新给礼物排序 
                dataAll.splice(clickIndex-1, 0,dataList);
                // 重新渲染牌子内容
                var giftHtml = '';
                if (dataAll) {
                    for(var i = 0;i < dataAll.length;i++){
                        var item = dataAll[i];
                        giftHtml += brandHtmlMB.replace(/\{\{index\}\}/g, (i+1))
                                    .replace(/\{\{giftSrc\}\}/g, item.giftUrl)
                                    .replace(/\{\{giftName\}\}/g, item.giftName)
                                    .replace(/\{\{giftPrice\}\}/g, (item.giftCoin + "币"));
                    }
                }
                $("#brand_div").html(giftHtml);
                // 选中的牌子翻转
                setTimeout(function(){
                    $("#item_side" + clickIndex).addClass("active");
                    $("#brand_item" + clickIndex).addClass("item_turn");
                    $("#brand_item" + clickIndex).parents(".brand_item_div").addClass("turnBtnClass");
                },200);
                // 其他牌子翻转
                setTimeout(function(){
                    for(var i = 0;i < dataAll.length;i++){
                        if((i+1) != clickIndex){
                            $("#brand_item" + (i+1)).addClass("item_turn");
                        }
                    }
                },1000);
            }
            
    }
    //一开始默认展示 牌子不带礼物信息
    var brandHtmlNoMB = '<div class="brand_item_div" onclick="funcGiftsTrendsData({{index}})">\
                            <div class="brand_item" id="brand_item{{index}}">\
                                <!-- 牌-礼物 -->\
                                <div class="item_side item_back"></div>\
                                <!--牌-背面 -->\
                                <div class="item_side item_front"></div>\
                            </div>\
                        </div>'
    //点击翻牌子后，重新渲染牌子+礼物排序
    var brandHtmlMB = '<div class="brand_item_div">\
                            <div class="brand_item" id="brand_item{{index}}">\
                                <!-- 牌-礼物 -->\
                                <div class="item_side item_back" id="item_side{{index}}">\
                                    <div class="item_img"><img src="{{giftSrc}}" alt="礼物图片{{giftName}}"></div>\
                                    <p class="item_name">{{giftName}}<br>{{giftPrice}}</p>\
                                </div>\
                                <!--牌-背面 -->\
                                <div class="item_side item_front"></div>\
                            </div>\
                        </div>'

css部分：

/*结果弹窗*/
.exchange_result_bg{width:100%;height:100%;background:rgba(0,0,0,0.8);position:fixed;top:0;right:0;bottom:0;left:0;z-index:99;}
/* 返牌弹窗 */
.brand_pop{width: 700px;height: 500px;box-sizing: border-box;position: fixed;margin: auto;left: 0;right: 0;top: 0;bottom: 0;}
.brand_p{width: 100%;height: 50px;font-size: 24px;text-align: center;color: #ffde1d;}
.brand_p span{font-size: 26px;color: #ff6101;font-weight: bold;}
.brand_p span.span_big{font-size: 28px;color: #ff6101;font-weight: bold;}
.brand_div{width: 638px;margin: 0 auto;}
.brand_div1{padding-top: 40px;}
.brand_div2{width: 475px;padding-top: 40px;}
.brand_div3{padding-top: 130px;}
.brand_item_div{float: left;width: 25%;height: 200px;margin-bottom: 14px;
    perspective:1000;/*perspective属性定义3D元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。*/
    -webkit-perspective:1000;
    -moz-perspective:1000;
    -ms-perspective:1000;
    -o-perspective:1000;}
.brand_div2 .brand_item_div{width: 33.3%;}
.brand_item{width: 137px;height: 200px;margin: 0 auto;
    position: relative;
    perspective:1000;
    -webkit-perspective:1000;
    -moz-perspective:1000;
    -ms-perspective:1000;
    -o-perspective:1000;
    backface-visibility:hidden;/*背对屏幕时隐藏*/
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    transition: all 0.8s ease; /*为翻牌添加过渡效果*/
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -ms-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transform-style: preserve-3d; /*子元素将保留其 3D 位置。*/}
.item_side{
    width:100%;
    height:100%;
    position: absolute;/*让背面和正面重叠*/
    left: 50%;
    margin-left: -68px;
    background: #ffde1d;
}
.item_side.active{
    background: #ffde1d;
    box-shadow:1px 1px 10px #c799ff;
}
.item_front{
    background:#c799ff;
    z-index: 2;
}
.item_back{
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
    -o-transform:rotateY(180deg);
    z-index: 3;
}
.item_turn{
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
    -o-transform:rotateY(180deg);
}
.item_img{width: 100%;height: 145px;margin: 0 auto;position: relative;}
.item_img img{height: 110px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.item_name{text-align: center;color: #0867aa;font-size: 18px;line-height: 22px;}
.active .item_name{color: #6d05c1;}

/* 放大缩小 */
.turnBtnClass{animation: turnClass 1s infinite linear;}
@keyframes turnClass{
    0%{
        transform: scale(1);  /*开始为原始大小*/
    }
    50%{
        transform: scale(1.1); /*放大1.1倍*/
    }
}

注意事项：翻牌子效果 rotate样式存在iOS兼容问题，样式上注意层级加好