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

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

强制Div低于另一个（具有3D翻转效果）

1 个答案: