Force Div Down Below Another（具有 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);
}

这是我的 fiddle：https://jsfiddle.net/8z2vbcrw/

希望这一切都是有道理的，但如果没有，请问我澄清。

Answer 1

可以通过为您的 .flipper 容器指定高度和宽度来完成，也可以通过去掉正面卡片上的绝对定位来完成...

https://jsfiddle.net/8z2vbcrw/

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

这样，前面的卡片就保持了布局。

Force Div Down Below Another（具有 3D 翻转效果）

Force Div Down Below Another (With 3D Flip Effect)

html

css