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;
    }
}

Flipcards ...在手机上破了

1 个答案: