CSS Flip 过渡效果 - 绝对定位打破响应

Question

我正在尝试整合这个 CSS Flip Effect与 Portfolio Item Bootstrap template .

我发现当浏览器窗口调整大小时，页面流变得非常困惑，因为 .card__front 和 .card__back 样式有 position : 绝对;。如果我删除 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;
}

代码笔

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

Answer 1

首先，删除float 属性或清除 如果您真的需要它。这修复了当您调整到较小屏幕时的翻转行为。

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

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

.card {
 padding-bottom: 65%;
}

CodePen