Question

我一直试图在同一个panel-body内制作两个panel来水平翻转。两个panel-body应该是一个在另一个之上，每当我越过面板时，它们应该旋转180度。

目前正在发生的事情是两个panel-body被顺序放入面板中;所以，即使其中一个panel-body被隐藏了，它的空间就在那里。

这是我的HTML / Twig模板：

<div class="row" data-checks-url="/checks" id="uptime-checks-panel">

    {% for check in checks %}

    <div class="col-xs-12 col-md-6 col-lg-4" id="{{ 'check_' ~ check.id }}">

        <div class="panel text-center flip">
            <div class="panel-body panel-front">
                <div class="panel-heading">
                    <h3 class="panel-title"> {{ check.name }}</h3>
                </div>

                <i {% if check.status=='up' %} class="fa fa-thumbs-up fa-5x thumbs-up" {% else %} class="fa fa-thumbs-down fa-5x thumbs-down" {% endif %} id="{{ check.id ~ '_status'}}">   
                    </i>

                <div class="panel-footer">
                    <a href="{{ check.hostname | external_link }}"> {{ check.hostname }}</a>
                </div>
            </div>

            <div class="panel-body panel-back">
                <ul class="list-group">
                    <li class="list-group-item">last response in {{ check.lastresponsetime }} millisecs </li>
                    <li class="list-group-item">last error {{ check.lasterrortime | pretty_timestamp }} ago</li>
                </ul>
            </div>

        </div>

    </div>

    {% endfor %}

</div>

这就是我目前使用的关于两个机构翻转的CSS：

.flip {
    background-color: red;
    border: 1px solid black;
}

.flip > .panel-front {
    transform: perspective(800px) rotateY(0deg);
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
}

.flip > .panel-back {
    transform: perspective(800px) rotateY(180deg);
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
}

.flip:hover > .panel-front {
    transform: perspective(800px) rotateY(-180deg);
}

.flip:hover > .panel-back {
    transform: perspective(800px) rotateY(0deg);
}

如果我向position: absolute和.panel-front添加.panel-back，结果会更糟，即所有网格都没有响应......当然我不想设置大小为panel，因为我需要一个响应网格。

这是视觉效果：

在讨论小组之前：

走完小组后：

备注：

过渡效果很好，但两个身体不是一个在另一个之上（如上所述）。
两个身体可以有不同的尺寸
我不想为面板设置尺寸，因为我需要一个响应式网格
我想要达到的效果与this example中的左侧和最顶层方格基本相同。

Answer 1

我通过将选择器.flip和.flip > .panel-back修改为：

来解决问题（至少现在这两个实体看起来是一个在另一个之上）

.flip {
    position: relative;
}

.flip > .panel-back {
    position: absolute;
    top: 0;
    min-width: 100%;
    min-height: 100%;

    background-color: green;
    transform: perspective(800px) rotateY(180deg);
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
}

如何在引导程序中翻转2个面板主体（可能有不同尺寸）？

1 个答案: