我有一个"可翻转的"由两个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行,那么使溢出:隐藏,它就会被破坏。
任何人都可以解释原因吗?
答案 0 :(得分:1)
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;
您可以在文档中看到解释: https://drafts.csswg.org/css-transforms/#grouping-property-values
通过添加
也可以轻松解决您的问题overflow:hidden;
到.modal-content div规则