CSS 翻转过渡效果 - 绝对定位会破坏响应性

Question

我正在尝试将此 CSS Flip Effect 与 Portfolio Item Bootstrap template 集成。

我发现当浏览器窗口调整大小时，页面流程变得非常混乱，因为.card__front 和.card__back 样式具有position: absolute;。如果我删除position: absolute;，会恢复正确的页面流行为，但为图像分配的空间仍然存在。

我尝试将element.style.display='none'; 切换为前/后，虽然这解决了空白问题，但当它到位时，我什至看不到瞬间翻转效果。

有没有什么方法可以同时具有翻转效果和页面流响应？

完整的 CodePen 链接如下，但这里有一些摘录（可能不是特别有用，但“显示代码”）。

HTML

<div class="col-md-8">
    <div class="card effect__click">
        <div class="card__front">
            <img class="img-responsive" src="./cards/1-front.png" alt="">
        </div>
        <div class="card__back">
            <img class="img-responsive" src="./cards/1-back.png">
        </div>
    </div>
</div>

CSS

/* card fronts and backs */
.card__front,
.card__back {
  position: absolute;
  top: 0;
  left: 0;
}

CodePen

正确的翻转效果和不正确的页面流响应示例： http://codepen.io/anon/pen/JEdmdL（点击灰色大图翻转）

Answer 1

首先，如果您确实需要，请删除float 属性或clear。当您调整到较小的屏幕时，这会修复翻转行为。

.card {
 /*float: left;*/
}

其次，要将布局固定在较小的屏幕上，您必须为卡片的父级分配足够的高度（因为卡片本身具有absolute 位置）。 使用您已经使用的属性padding-bottom 控制该高度。所以，增加百分比就可以了。

.card {
 padding-bottom: 65%;
}

CodePen