水平滚动div中动画的卡片间距问题

Question

我正在尝试在水平滚动的div中显示卡片，这些卡片通过不断翻转并显示两侧来进行动画处理。问题是由于某种原因，我的.storecard类的宽度不会自动调整为它们内图像的大小，从而导致它们重叠而不是正确散布。我认为此间距问题与为了使动画正常工作而需要“绝对”放置图像的位置有关，但是我不确定如何在不破坏动画的情况下正确地对其进行修复。

另外，当我取出一张卡以外的所有卡时，该卡并未像应有的那样在水平方向上居中。同样，我认为这与位置有关：绝对位于“ .back”和“ .front”上。

我整天都在努力解决这个问题，完全陷入困境。

这里是展示问题的JSFiddle：https://jsfiddle.net/t8vgkba5/1/

[这是类似的JSFiddle，它具有一个水平滚动的div，在每个.card中都嵌入了youtube视频，而不是扑克牌。这里的间距是正确的，并且是我针对纸牌的目标：https://jsfiddle.net/53nytacx/

谢谢！

JSFiddle中的CSS片段：

.front {
    margin: 0 auto;
    visibility: hidden;
    position: absolute;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    -webkit-animation: swag 5s infinite;
    -moz-animation: swag 5s infinite;
    -o-animation: swag 5s infinite;
    animation: swag 5s infinite;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    backface-visibility:hidden;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: 1px solid transparent;
}

Answer 1

你好，我想这就是你想要的吗？

.storecard {
    display: inline-block;
    height: 475px;
    width: 155px;
    position: relative;
}

https://jsfiddle.net/sdybn2xk/