强制 Div 在另一个下方（使用 3D 翻转效果）

Question

我在 CSS 中实现了 3D 翻转效果，让我的 div 有正面和背面（默认显示正面，悬停时返回）。翻转本身工作得很好，但最后还有一个高度较小的 div，我似乎无法弄清楚如何将这个 div 推到翻转的那个上方。我的目标是让翻转 div 在一条线上，而另一个图像在其下方，而不是被翻转 div 覆盖。

当然，由于我们不能让这变得太容易，翻转图像和下面 div 中的图像都必须能够处理可变大小的图像，它们永远不会设置尺寸。

这是 HTML：

    <div class="images">
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">

        <div class="flipper">

            <div class="front">
                <img src="http://www.placehold.it/350x450?text=front">  
            </div>

            <div class="back">
                <img src="http://www.placehold.it/350x450?text=back">
            </div>

        </div>

    </div>
    <br />
    <div class="thumbnails columns-3" style=""><img src="http://www.placehold.it/350x150?text=image"></div>
</div>

这是 CSS：

div.images {
  float: left;
  margin-bottom: 1em;
}


/* Flip3D */
/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
/*  width: 100%;
    height: 100%;*/

}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

这是我的小提琴：https://jsfiddle.net/8z2vbcrw/

希望这一切都有意义，但如果不是，请向我澄清。

Answer 1

这可以通过为您的 .flipper 容器指定高度和宽度来完成，或者只是摆脱正面卡上的绝对定位...

https://jsfiddle.net/8z2vbcrw/

.front, .back {
  backface-visibility: hidden;
  top: 0;
  left: 0;
}
.back {
  position: absolute;
}

通过这样做，前卡保持布局。