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

Question

我正在尝试整合这个 CSS Flip Effect with the Portfolio Item Bootstrap template。

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

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

有没有办法既有翻转效果又让页面流响应？

完整的 CodePen 链接如下，但这里有一些摘录（可能不是特别有用，但 "show code"）。

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

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

CSS Flip Transition Effect - Absolute Positioning Breaks Responsiveness

css

flip

twitter-bootstrap-3