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

Question

我正在尝试在水平滚动 div 中显示卡片，该卡片通过不断翻转并显示两侧来进行动画处理。问题是由于某种原因，我的 .storecard 类的宽度不会自动调整为其中图像的大小，从而导致它们重叠而不是正确展开。我相信这个间距问题与需要 'absolute' 才能使动画正常工作的图像定位有关，但我不确定如何在不破坏动画的情况下正确修复它。

此外，当我移除除一张以外的所有卡片时，卡片没有像它应该的那样水平居中。同样，我认为这与 position: absolute on '.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

找到答案现在是动态的https://jsfiddle.net/p8t1qykL/

我改变了“.front”的位置

#horizontalcontainer {
    z-index: 0;
    position: absolute;
    width: 100%;
    height:100%;
    display: flex;
    align-items: center;
}
.scrolling-wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    text-align: center;
    margin: 0 auto;
    background: red;
    height: 50vh;
    width: 100vw;
}

.card {
    display: inline-block;
    padding-right: 40px;
    position: relative;
    height: 100%;
}

.card:first-child{
  padding-left: 40px;
}
.scrolling-wrapper {
    -webkit-overflow-scrolling: touch;
}

.back {
    margin: 0 auto;
    position: absolute;
    height:100%;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    -webkit-animation: love 5s infinite;
    -moz-animation: love 5s infinite;
    -o-animation: love 5s infinite;
    animation: love 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; 
}
.front {
    margin: 0 auto;
    visibility: hidden;
    position: relative;
    height: 100%;
    width: auto;
    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;
}

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

Card spacing issue with animations within a horizontally scrolling div

css

position

css-animations