rotatey() 元素与高级 z-index、safari 上的元素重叠答案

【问题标题】：rotatey() element overlaps elements on superior z-index, safarirotatey() 元素与高级 z-index、safari 上的元素重叠
【发布时间】：2021-02-12 07:30:09
【问题描述】：

在 safari（osx 和 ios）中，使用 rotatey() 转换的元素似乎在其旋转时会爬升 z-indexes，与位于高级 z-indexes 上的其他元素重叠。

附加的sn-p在chrome和firefox上渲染如下：

...在 safari（osx 和 ios）上如下：

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

谢谢

.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;
 }

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

【问题讨论】：

标签： html css 3d transform css-transforms

【解决方案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>

【讨论】：