小编Ric*_*ich的帖子

我有一个"可翻转"的模态对话,由两个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转换我通过将"翻转"类添加到模态内容中来翻转模式以显示背面:

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

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

这看起来很奇怪.为什么设置overflow属性会以这种方式改变背面可见性？

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

有谁能解释为什么？