Iframe忽略CSS 3D transform定义的Z层级顺序问题及解决方法

iframe属于浏览器特殊处理的替换元素，默认会被分配到独立的合成渲染层，和父文档的3D变换上下文天然隔离：

1. 父元素设置的transform-style: preserve-3d规则无法穿透iframe的渲染边界，iframe不会参与父文档的3D空间层级计算
2. 3D transform的z轴值仅在同一个3D上下文中生效，iframe的层级排序只会遵循普通文档流的z-index堆叠规则，跨域iframe的隔离效应会更明显
3. 多个iframe之间层级失效也是同理，它们都脱离了父级3D上下文，默认按DOM节点的先后顺序堆叠

• 方案1：给对应层级的父容器显式设置匹配z轴优先级的z-index，是适用范围最广的修复方案，跨域场景也可用，仅需要补充如下CSS：

#center > * {
    position: absolute;
    isolation: isolate; /* 强制生成独立层叠上下文，保证z-index生效 */
}
.transform1 {
    transform-style: preserve-3d;
    transform: translate3d(0, 0, 200px);
    z-index: 3; /* z轴越高，z-index值越大 */
}
.transform2 {
    transform-style: preserve-3d;
    transform: translate3d(0, 0, 100px);
    z-index: 2;
}

• 方案2：不使用z-index的场景下，可以给iframe外层额外嵌套一层div，给该div设置transform: inherit和backface-visibility: hidden，强制外层容器先参与父级3D排序，再承载iframe的渲染。
• 方案3：同域iframe场景下，可以将父文档的perspective和3D变换参数同步到iframe内部的根元素，让iframe内部内容也遵循统一的3D上下文规则。

内容的提问来源于stack exchange，提问作者Lunuy