为什么设置溢出:隐藏;打破背面可见性声明?

时间:2015-09-02 11:59:52

标签: css css3 overflow css-transforms

我有一个"可翻转的"由两个div(正面和背面)组成的模态对话:

<div class="modal-dialogue">
    <div class="modal-content">
        <div class="front">
             <h1>Front</h1>
        </div>
        <div class="back">
             <h1>Back</h1>
        </div>
    </div>
</div>

使用CSS变换我通过添加&#34;翻转&#34;翻转模式以显示背面。使用以下方法对模态内容进行分类:

.modal-content.flipped {
    -webkit-transform: rotateY(180deg);
}

这一切正常...... 除了我添加溢出:隐藏;属性到模态内容。突然,后部div不可见,而前部div的背面变得可见(即使背面可见性设置为隐藏)。

这似乎很奇怪。为什么设置overflow属性会以这种方式改变背面可见性?

你可以在这个小提琴中看到它:https://jsfiddle.net/amxp02mx/。它工作正常,但是如果你在CSS中注释掉第31行,那么使溢出:隐藏,它就会被破坏。

任何人都可以解释原因吗?

1 个答案:

答案 0 :(得分:1)

&#13;
&#13;
document.querySelector(".modal-content")
    .addEventListener("click", function () {
    this.classList.toggle("flipped");
});
&#13;
    .modal-dialogue {
        z-index: 1050;
        display: block;
        width: 25rem;
        min-height: 30rem;
        margin-left: -12.5rem;
        margin-top: -15rem;
        position: fixed;
        left: 50%;
        top: 50%;
        -webkit-perspective: 800px;
    }
    .modal-content {
        width: 25rem;
        min-height: 30rem;
        position: relative;
        background-color: transparent;
        border-radius: 10px;
        outline: none;
        transition: 0.8s ease;
        -webkit-transform-style: preserve-3d;
        -webkit-transition: -webkit-transform 1s;
        margin: 5rem auto 0 auto;
        
        /* With overflow:hidden; the back of the panel is 
        not visible and the backface-visibility:hidden 
        stops working. Why? */
        overflow: hidden;
        
        /* With overflow: visible; it works fine. */
        overflow: inherit;
    }
    .modal-content div {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        color: white;
        font-size: 140px;
        font-weight: bold;
        text-align: center;        
        overflow: hidden;
    }
    .modal-content .front {
        background: red;
        z-index:0;
    }
    .modal-content .back {
        background: blue;
        -webkit-transform: rotateY(180deg);
        z-index:-1;
    }
    .modal-content.flipped {
        -webkit-transform: rotateY(180deg);
    }
&#13;
<div class="modal-dialogue">
    <div class="modal-content">
        <div class="front">
             <h1>Front</h1>

        </div>
        <div class="back">
             <h1>Back</h1>

        </div>
    </div>
</div>
&#13;
&#13;
&#13;

您可以在文档中看到解释: https://drafts.csswg.org/css-transforms/#grouping-property-values

通过添加

也可以轻松解决您的问题
overflow:hidden;

到.modal-content div规则

https://jsfiddle.net/amxp02mx/4/