Question

我试图将此CSS Flip Effect与Portfolio Item Bootstrap template进行整合。

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

我试图在前/后切换element.style.display='none';，虽然这解决了空白问题，但当它到位时我甚至看不到分秒翻转效果。

有没有办法同时兼具翻转效果和页面流是否有响应？

完整CodePen链接如下，但这里有一些摘录（可能不是特别有帮助，但＆＃34;显示代码＆＃34;）。

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

首先，如果您确实需要，请删除@IBAction func Expansion(_ sender: AnyObject) { UIView.animate(withDuration: 0.1, animations: { self.ScrolliewTopConstraint.constant = 0 self.ScrollView.isScrollEnabled = true }, completion: nil) }属性或float。这可以修复当您调整到较小屏幕时的翻转行为。

clear

其次，要在较小的屏幕上修复布局，您需要为卡片的父级分配足够的高度（因为卡片本身具有.card { /*float: left;*/ }位置）。使用您已使用的属性absolute控制该高度。因此，增加百分比将成功。

padding-bottom

CodePen

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

1 个答案: