rotationy（）元素与上级z-index，safari上的元素重叠

Question

在野生动物园（osx和ios）中，使用rotatey（）转换的元素似乎在旋转时攀登了z索引，与其他在较高z索引上的元素重叠。

所附的代码段在chrome和Firefox中呈现如下：

...以及以下关于Safari（osx和ios）的信息：

我想要的是chrome和firefox在Safari中的行为，如何实现？

谢谢

actor_ids

.container {
  width: 100%;
  height: 100%;
  position: relative;
  perspective: 2000px;
}

.container>div {
  position: absolute;
  top: 0;
  left: 0;
}

.upper {
  z-index: 3;
  width: 300px;
  height: 200px;
  background: blue;
}

.rotating {
  z-index: 2;
  width: 200px;
  height: 300px;
  background: red;
  transform: rotatey(-40deg);
}

.lower {
  z-index: 1;
  width: 100px;
  height: 400px;
  background: green;
 }

Answer 1

尽管我仍然不知道发生这种情况的原因，但是将旋转元素包装在其自己的3d场景（带有透视图的元素）中足以将其与其他div隔离开来，并阻止其在旋转期间进行交互。当然，该元素也需要定义其z-index：

.container {
  width: 100%;
  height: 100%;
  position: relative;
}

.container>div {
  position: absolute;
  top: 0;
  left: 0;
}

.upper {
  z-index: 3;
  width: 300px;
  height: 200px;
  background: blue;
}

.wrapper {
  perspective: 2000px;  
  z-index: 2;
}

.rotating {
  width: 200px;
  height: 300px;
  background: red;
  transform: rotatey(-40deg);
}

.lower {
  z-index: 1;
  width: 100px;
  height: 400px;
  background: green;
 }

<div class="container">
  <div class="upper">
  </div>
  <div class="wrapper">
    <div class="rotating">
    </div>
  </div>
  <div class="lower">
  </div>
</div>