html - iframe 通过 CSS 3D 变换忽略 Z 顺序

问题描述

<!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>

我认为，transform2 中的 div 和 iframe 应该是一样的。像这样。

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

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

标签： htmlcss3d

html - iframe 通过 CSS 3D 变换忽略 Z 顺序

问题描述

解决方案

推荐阅读