Question

考虑以下情况：

HTML：

<div class="container-outer">
    <div class="container-inner">
        <canvas id="canvas1"></canvas>
        <canvas id="canvas2"></canvas>
        <canvas id="canvas3"></canvas>
    </div>
</div>

CSS：

.container-outer,
.container-inner,
canvas {
    position: absolute;
}

canvas {
    top: 0;
    left: 0;
}

.container-outer {
    perspective: 1000px;
    transform-style: flat;
}

.container-inner {
    transform-style: preserve-3d;
}

#canvas1 {
    z-index: 1;
}
#canvas2 {
    z-index: 2;
}
#canvas3 {
    z-index: 3;
}

据我了解，这些HTML元素中的每一个都会创建一个新的堆叠上下文，因为它们都是定位的。鉴于此，我希望＃canvas3始终出现在＃canvas1和＃canvas2之上。如果每个元素都创建了自己的新堆叠上下文，那么这些上下文按DOM顺序堆叠，就像它们每个只是一个简单的堆叠层一样，对吧？

这一切都正常，直到我将3d转换应用于＃canvas3，例如，

#canvas3 {
    -webkit-transform: matrix3d(0.773673421825969, 0.551819872491575, -0.311326620582756, 0, -0.392059934956964, 0.802962743707314, 0.448931887505848, 0, 0.497713214373135, -0.225267974957394, 0.837577396839813, 0, 0, 0, 0, 1);
}

（那只是一个任意的旋转。）此时，＃canvas3的部分与＃canvas2和＃canvas1相交并在其后面滑动。我需要的是＃canvas3是abel进行我应用的任意变换，但总是在＃canvas2和＃canvas1前面渲染。有人能指出我正确的方向吗？

css3堆叠上下文和3d转换

0 个答案: