Question

我正在尝试使用css3 3d创建“日历”式翻转动画。虽然它在firefox中看起来很棒，但在谷歌镀铬堆叠顺序都搞砸了，看起来好像z-index已经改变了。

这是我的代码的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来解决问题。

Answer 2

问题来自于缺少3D容器。它允许浏览器正确呈现3D内容。例如，如果您将transform-style: preserve-3d;添加到#calendar，则Chrome会理解其所有.page个子项都属于同一个3D环境，并且Z轴将正确呈现。

在您当前的示例中，每个页面都是自己的3D环境，因此浏览器无法真正提供您想要的结果。

希望有所帮助！

http://jsfiddle.net/qaxfs6pe/2/

webkit css3 3d堆叠订单问题

2 个答案: