Javascript 需要帮助提高扑克牌悬停效果吗

当一张卡通过另一张卡时，我对z索引动画有一些问题。 你有什么想法来改进动画并使其更平滑吗？ 下面是动画： Thx

css:

js:

html:

<div class="container">
    <h1>carte</h1>
    <div class="container cardWidget">
        <div class="card ">
        </div>
        <div class="card ">
        </div>
        <div class="card">
        </div>
        <div class="card ">
        </div>
        <div class="card previous">
        </div>
        <div class="card center">
        </div>
        <div class="card next">
        </div>
        <div class="card">
        </div>
        <div class="card">
        </div>
        <div class="card">
        </div>
        <div class="card">
        </div>
    </div>
</div>

菜单

不设置z索引更改动画如何：

transition: transform .25s ease-out;

在我看来很漂亮很光滑

$（函数（）{
zIndexManager（$（'.center'）、$（'.previous'）、$（'.next'））
var cardDOMArray=$（'.card'）；
//cardDOMArray.hover（cardEnter、cardLeave）；
cardDOMArray.hover（函数（e）{
cardEnter（如currentTarget、cardDOMArray）；
}，功能（e）{
cardLeave（如currentTarget、cardDOMArray）；
});
cardDOMArray.on（“单击”，函数（e）{
提款卡（如currentTarget）；
});
});
功能cardEnter（e、cardDOMArray）{
//控制台日志（“输入”）；
//日志（getPreviousCard（$（e））；
//log（getNextCard（$（e））；
zIndexManager（$（e）、getPreviousCard（$（e））、getNextCard（$（e））；
$（'.card'）.removeClass（“居中上一个下一个”）；
getPreviousCard（$（e））.addClass（“先前”）；
getNextCard（$（e））.addClass（“下一步”）；
$（e）.addClass（“中心”）；
}
功能cardLeave（e、cardDOMArray）{
$（'.card'）.removeClass（“居中上一个下一个”）.css（'zIndex'，'1'）；
}
函数getPreviousCard（卡）{
如果（card.prev（）.length>0）{
返回卡.prev（）；
}
否则{
返回$（）；
}
}
函数getNextCard（卡）{
if（card.next（）.length>0）{
返回卡。下一步（）；
}
否则{
返回$（）；
}
}
功能zIndexManager（中心卡、上一张卡、下一张卡）{
var allNextCard=centerCard.nextAll（）；
//console.log（allNextCard）；
var allNextCard length=allNextCard.length；
//console.log（allNextCardLength）；
如果（allNextCardLength>0）{
css（'zIndex'，allNextCardLength）；
allNextCard.each（函数（）{
$（this.css（'zIndex'，--allNextCardLength）；
});
}
}

.card{
显示：内联块；
位置：相对位置；
宽度：100px；
高度：200px；
左边距：-20px；
右边距：-20px；
/*背景色：#999999*/
背景图像：线性梯度（90度，#999999，#666666）；
边框：3px实心#2e6da4；
z指数：1；
过渡：变换。25秒放松；
}
.中心{
变换：比例（1.2,1.2）；
}
.以前的{
变换：比例（1.1,1.1）；
}
.下一个{
变换：比例（1.1,1.1）；
}

菜单

请考虑接受我的回答。。。泰

<div class="container">
    <h1>carte</h1>
    <div class="container cardWidget">
        <div class="card ">
        </div>
        <div class="card ">
        </div>
        <div class="card">
        </div>
        <div class="card ">
        </div>
        <div class="card previous">
        </div>
        <div class="card center">
        </div>
        <div class="card next">
        </div>
        <div class="card">
        </div>
        <div class="card">
        </div>
        <div class="card">
        </div>
        <div class="card">
        </div>
    </div>
</div>

transition: transform .25s ease-out;