css - webkit css3 3d 堆叠顺序问题

Question

我正在尝试使用 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);
}

Answer 1

对于同一节点中的元素，chrome 会将后面的元素视为具有比前一个元素更高的 z-index，即使事实并非如此。我与 chrome 如何建立堆叠上下文有关，还解释了为什么在某些情况下 Firefox 需要它才能正确显示，因此不需要 preserve-3d。

当我在数字时钟实现中遇到同样的问题时，我不得不更改 z-index 来解决这个问题。