如何在列块中使用 html 使翻转框响应

Question

我正在使用 Wordpress（Blocksy 主题），并创建了一个可在桌面上运行的三列翻页框，但不适用于移动设备。这段代码发生了两件事。我能够修复其中一个，但想知道为什么会发生这种情况（翻转卡与页面上的其他现有元素重叠。）我需要添加 3 个垫片，然后一切就合适了。

另一个问题（我不知道如何解决）是，在移动设备上，翻转卡相互重叠而不是堆叠，因此它们位于彼此后面。我希望在移动设备上查看时每个框都位于自己的行上。

我最初的想法是使用带有 html 的列块 - 每个翻页卡都有自己的图形 - 因此 3 列中的每一列都有 html 代码。 （我尝试制作自己的列和行，并将所有 html 放在一个列块中，但桌面上只显示一张翻转卡图像，而不是并排看到 3 张图像。当然，它没有无法在移动设备上使用。

如何使这些翻转卡片具有响应能力？另外，有没有办法使卡片在移动设备上触摸时翻转回来？（我注意到如果我触摸卡片上方，它会翻转回来，但不会）在卡上。）。谢谢

下面是代码（带有具体的图像和文本已删除）：（就其价值而言，我知道 CSS 代码是多余的，但是当我尝试组合类时，我丢失了一些样式。例如，当我组合 .thefront-left-flipcard 时。thefront- center-flipcard 和 thefront-right-flipcard 对于除背景图像之外的所有样式，除其他外，卡片的正面几乎失去了所有宽度。）

跨 3 列的列块

列框 1：

<div class="maincontainer">

    <div class="thecard">

        <div class="thefront-left-flipcard">left title</div>

            <div class="theback">
                <ul>
                    <li>data</li>
                    <li>data</li>
                    <li>data</li>
                    <li>data</li>
                    <li>data</li>
               </ul>
        </div>
    </div>
</div>

列框 2：

<div class="maincontainer">

    <div class="thecard">

        <div class="thefront-center-flipcard">center title</div>

            <div class="theback">
                <ul>
                    <li>data</li>
                    <li>data</li>
                    <li>data</li>
                    <li>data</li>
                    <li>data</li>
               </ul>
        </div>
    </div>
</div>

列框 3：

<div class="maincontainer">

    <div class="thecard">

        <div class="thefront-right-flipcard">right title</div>

            <div class="theback">
                <ul>
                    <li>data</li>
                    <li>data</li>
                    <li>data</li>
                    <li>data</li>
                    <li>data</li>
               </ul>
        </div>
    </div>
</div>
  




/*flipcard*/

/* THE MAINCONTAINER HOLDS EVERYTHING */
.maincontainer{
    position: absolute;
    height: 270px;
    width: 315px;
}
* THE CARD HOLDS THE FRONT AND BACK FACES */
.thecard{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    transform-style: preserve-3d;
    transition: all 2s ease;
}


/* THE PSUEDO CLASS CONTROLS THE FLIP ON MOUSEOVER AND MOUSEOUT */
.thecard:hover {
    transform: rotateY(180deg);
}

/* THE FRONT FACE OF THE CARD, WHICH SHOWS BY DEFAULT */
.thefront-left-flipcard{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    text-align: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    background-color: #6cbe45;
    background-image: url(https://..left.png);
    background-repeat:no-repeat;
    background-position: center;
    color: #6cbe45;
    font-size: 2.5em;
}

.thefront-center-flipcard{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    text-align: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    background-color: #6cbe45;
    background-image: url(https://..center.png);
    background-repeat:no-repeat;
    background-position: center;
    color: #6cbe45;
    font-size: 2.5em;
}

.thefront-right-flipcard{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    text-align: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    background-color: #6cbe45;
    background-image: url(https://..right.png);
    background-repeat:no-repeat;
    background-position: center;
    color: #6cbe45;
    font-size: 2.5em;
}

/* THE BACK FACE OF THE CARD, WHICH SHOWS ON MOUSEOVER */

.theback{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    background: #07486d;
    color: #e4c548;
    text-align: left;
    transform: rotateY(180deg);
}

Answer 1

这很简单。看看下面这个例子：

.ea-flip-card-item {
    background-color: transparent;
    max-width: 300px;
    height: 300px;
    width: 100%;
    perspective: 1000px;
}
.ea-flip-card-item .ea-flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.ea-flip-card-item:hover .ea-flip-card-inner {
    transform: rotateY(180deg);
}
.ea-flip-card-item .front, .ea-flip-card-item .back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.ea-flip-card-item .front {
    background-color: #ffa500;
    color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ea-flip-card-item .back {
    background-color: #ffffff;
    color: black;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

<div class="ea-flip-card-item">
            <div class="ea-flip-card-inner">
                <div class="front">
                    <div class="ua-flip-card-content text-center position-absolute d-flex align-items-center justify-content-center flex-wrap flex-column">
                            <h3>
                                I am from Front
                            </h3>
                            <p>
                              add description here
                            </p>
                    </div>
                </div>

                <div class="back">
                    <div class="ua-flip-card-content text-center position-absolute d-flex align-items-center justify-content-center flex-wrap flex-column">
                    <h1>
                                I am from Back</h1>
                                <p>Cool</p>
                    </div>
                </div>
            </div>
        </div>