Flipcards ...在移动设备上损坏

Question

我一直在制作一些要放在网站上的翻转卡片（使用 bootstrap 4 和 jQuery），并且在桌面上看起来一切正常，但是当我在移动设备上测试它时，事情变得奇怪，背面卡片消失，正面卡片得到翻转。

我已经在代码中说明了一段时间，并试图解决这个问题，但没有运气，所以我将它放入了一个 codepen 并决定寻求一些帮助。

我猜这很明显，但代码在这里https://codepen.io/magical1/pen/paaNmB。

我想有问题的代码在这里

@media not all,
not all {
    .front,
    .back {}
    .back {
        visibility: hidden;
    }
    .front {
        z-index: 4;
    }
    .card-container:not(.manual-flip):hover .back,
    .card-container.manual-flip.hover .back {
        z-index: 5;
        visibility: visible;
    }
}

Answer 1

问题似乎出在苹果设备上的 transform-style 上。

Codepen：https://codepen.io/YasirKamdar/pen/oEEZwJ

更新 CSS 如下：

body {
    margin-top: 60px;
    font-size: 14px;
    background-color: rgb(226, 239, 252);
}

.card-container {
    perspective: 800px;
    margin-bottom: 30px;
}

.card-container:not(.manual-flip):hover .card,
.card-container.hover.manual-flip .card {
    transform: rotateY(180deg);
}

.card-container.static:hover .card,
.card-container.static.hover .card {
    transform: none;
}

.card {
    transition: transform 0.5s;
    /*transform-style: preserve-3d;*/
    position: relative;
    border: none;
}

.front,
.back {
    position: absolute;
    top: 0px;
    left: 0px;
}

.front {
    z-index: 2;
}

.back {
    transform: rotateY(180deg);
    z-index: 3;
}

.btn-simple{
    background: white;
    border-radius: 50px;
}

btn-simple i{
    font-size:13px;
}

.back .btn-simple {
    position: absolute;
  right: 4px;
    top: 4px;
  width 26px;
}

.card {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    border-bottom-left-radius: 24px;
    color: rgb(68, 68, 68);
}

.grad1 .front,
.grad1 .back {
    background-image: linear-gradient(141deg, rgb(114, 178, 204) 0%, rgb(106, 150, 196) 34%, rgb(88, 104, 189) 66%, rgb(88, 104, 219) 100%);
}

.grad2 .front,
.grad2 .back {
    background-image: linear-gradient(135deg, rgb(253, 139, 165) 0%, rgb(193, 71, 111) 100%);
}

.grad3 .front,
.grad3 .back {
    background-image: linear-gradient(141deg, rgb(228, 190, 143) 0%, rgb(228, 158, 158) 28%, rgb(209, 105, 164) 100%);
}

.card-container,
.front,
.back {
    width: 100%;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    border-bottom-left-radius: 24px;
    min-height: 420px !important;
}

@media all, all {
    .front,
    .back {}
    .back {
        visibility: hidden;
    }
    .front {
        z-index: 4;
    }
    .card-container:not(.manual-flip):hover .back,
    .card-container.manual-flip.hover .back {
        z-index: 5;
        visibility: visible;
    }
}