我正在尝试使用 css3 3d 创建类似“日历”的翻转动画。 尽管它在 Firefox 中看起来不错,但在 google chrome 中堆叠顺序全乱了,看起来 z-indexes 不知何故发生了变化。
这是我的代码的 jsfiddle:http://jsfiddle.net/qaxfs6pe/
这里是简单的 html:
<div id="calendar">
<div class="page">
<div class="front"><img src="http://www.placecage.com/400/300"></div>
<div class="back">YOU GOT CAGED</div>
</div>
<div class="page">
<div class="front"><img src="http://www.placecage.com/400/300"></div>
<div class="back">YOU GOT CAGED</div>
</div>
<div class="page">
<div class="front"><img src="http://www.placecage.com/400/300"></div>
<div class="back">YOU GOT CAGED</div>
</div>
</div>
这是我拥有的 scss,它与 autoprefixer 配对,出于可读性目的我省略了它:
$w:400px;
$h:300px;
#calendar{
margin: 0 auto;
width:$w;
height:$h;
}
.page{
width:$w;
height:$h;
position:absolute;
transform: perspective(1000px) rotateX(0deg);
transform-origin: 0% 0%;
transition:transform 2s;
transform-style:preserve-3d;
backface-visibility: hidden;
}
.flipped{
transform: perspective(1000px) rotateX(180deg);
transform-origin: 0% 0%;
}
.page > div{
backface-visibility: hidden;
width:$w;
height:$h;
position: absolute;
top: 0;
left: 0;
background:rgba(230,230,230,1);
}
.front{
z-index:2;
}
.back{
transform: rotateX(180deg);
}
最佳答案
对于同一节点中的元素,chrome 会将后面的元素视为具有比前一个元素更高的 z-index,即使事实并非如此。我与 chrome 如何建立堆叠上下文有关,还解释了为什么在某些情况下 Firefox 需要它才能正确显示,因此不需要 preserve-3d。
当我在数字时钟实现中遇到同样的问题时,我不得不更改 z-index 来解决这个问题。
关于css - webkit css3 3d 堆叠顺序问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25342201/