Iframe 通过 CSS 3D 变换忽略 Z 顺序

Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <div id="center">
            <div class="transform1">
                <div style="display: inline-block; background-color: red; width: 400px; height: 200px; transform: translate3d(-200px, -100px, 0)"></div>
            </div>
            <div class="transform2">
                <div style="display: inline-block; background-color: green; width: 400px; height: 200px; transform: translate3d(-400px, -100px, 0)"></div>
            </div>
            <div class="transform2">
                <iframe style="transform: translate3d(0, -100px, 0)" width="400" height="200" src="https://www.youtube.com/embed/aMDFhjpMTEY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>
    </div>
    <style>
        #root {
            position: relative;
            perspective: 400px;
            height: 800px;
            overflow: hidden;
        }
        #center {
            transform-style: preserve-3d;
            transform: translate3d(50%, 50%, 0);
            height: 100%;
        }
        #center > * {
            position: absolute;
        }
        .transform1 {
            transform-style: preserve-3d;
            transform: translate3d(0, 0, 200px);
        }
        .transform2 {
            transform-style: preserve-3d;
            transform: translate3d(0, 0, 100px);
        }
    </style>
</body>
</html>

我认为，div 和 iframe in transform2 应该工作相同。像这样。

但我可以看到这样的结果：

iframe 通过 CSS 3D 转换忽略 Z 顺序。甚至在 iframe 之间。为什么他们忽略 Z 顺序？我该如何解决？

Answer 1

我不知道为什么会这样，但是如果你把红色 div 放在最后它就可以正常工作：

#root {
  position: relative;
  perspective: 400px;
  height: 800px;
  overflow: hidden;
}

#center {
  transform-style: preserve-3d;
  transform: translate3d(50%, 50%, 0);
  height: 100%;
}

#center>* {
  position: absolute;
}

.transform1 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 200px);
}

.transform2 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 100px);
}

<div id="root">
  <div id="center">
    <div class="transform2">
      <div style="display: inline-block; background-color: green; width: 400px; height: 200px; transform: translate3d(-400px, -100px, 0)"></div>
    </div>
    <div class="transform2">
      <iframe style="transform: translate3d(0, -100px, 0)" width="400" height="200" src="https://www.youtube.com/embed/aMDFhjpMTEY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
    </div>
    <div class="transform1">
      <div style="display: inline-block; background-color: red; width: 400px; height: 200px; transform: translate3d(-200px, -100px, 0)"></div>
    </div>
  </div>
</div>

Answer 2

事实上，您的代码中并没有使用 z 顺序。

translate3d 用于数学翻译，因此 'tz' 参数会产生缩放效果，而不是您预期的不同元素之间的 z 顺序。

此外，将红色 div 修改为 html 代码顺序，因此它使红色 div 高于其他。

Answer 3

是浏览器的问题，在Chrome。

Chromium 问题：https://bugs.chromium.org/p/chromium/issues/detail?id=1264783

Iframe 通过 CSS 3D 变换忽略 Z 顺序

Iframe ignores Z order by CSS 3D transform

html

css

3d