CSS 3D 变换 : inverted element selection

Question

我的问题可能有点复杂，因为我使用屏幕截图来正确说明我的问题。如果我谈论浏览器，我总是指最新版本。

我用 3D 变换 build 了一个房间。

这是 Chrome 中的房间

如果我将元素悬停在开发工具检查器中，每个元素都会正确突出显示(蓝色)，除了地板。

地板是这样突出显示的:

它基本上突出了消失点(或者地板无限大时的样子)。

现在我不会对开发工具突出显示有任何问题。问题是 firefox 不会那样显示地板。这是 firefox - 突出显示相同的部分 - 不显示地板:

地板通过 transform: rotateX(90deg) 旋转。这是最让我困惑的。如果我将地板向后移动 -35 像素，则根本没有高光。 恰好 -36 像素，地板正确突出显示并可见!

这是添加了 translate3d(0px, -35px, 0px) 显示地板的 Chrome。亮点不见了! (我移开了墙壁以更好地看到地板)

这是带有 translate3d(0px, -36px, 0px) 的 chrome。

地板正确突出显示!在 firefox 中也是如此，现在可以正确显示楼层了!

地板的消失(在 FF 中)和通过开发工具(chrome 和 ff)的错误选择仅出现在地板围绕其 x 轴在 80 到 100 度之间的旋转中。地板下方和上方突出显示并正确标记。与 chrome 相同，除了 chrome 正在显示地板，即使它在开发工具中奇怪地(错误地？)突出显示。

这是 firefox 显示的地板旋转了 60 度而不是 90 度(并且没有应用 translate3d。

所以我的结论是，如果我修复了开发工具中的突出显示，我将能够在 Firefox 中看到地板。由于 Firefox 和 Chrome 都像那样突出显示地板，我认为这是期望的行为。谁能给我解释一下？

这是为房间供电的 CSS (.scss):

$baseX: 718px;
$baseY: 432px;
$catwalkWidth: 182px;
$wallDistance: 1535px;

section {

    width: 100%;
    height: 100%;

    background-image: url(../img/bg.jpg);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;

    perspective: 1500px;
    perspective-origin: 638px 305px;

    overflow: hidden;

    transition: all ease 1s;
}

.wall {

    width: $baseX;
    height: $baseY;
    position: absolute;
    right: 0;
    top: 0;
    background-color: orange;

    transform: translateZ(-0px);

    z-index: 100;
    box-shadow: inset 0 -10px 10px -10px #666;

    background: linear-gradient(to bottom,#e8dad1 67%,#e8dad1 67%,#dedddc 100%);

}


.back-wall {
    width: $catwalkWidth;
    height: $baseY;
    position: absolute;
    top: 0;
    right: $baseX;
    background: linear-gradient(to bottom,#e8dad1 67%,#e8dad1 67%,#dedddc 100%);
    opacity: .9;
    z-index: 50;
    transform: translateZ(-495px);

}

.side-wall-1 {
    position: absolute;
    top: 0;
    height: $baseY;
    right: $baseX + $catwalkWidth;
    width: 750px;
    opacity: .5;
    z-index: 105;
    transform-origin: right bottom;
    transform: rotateY(90deg) translateX(-100px);
}

.side-wall-2 {
    position: absolute;
    top: 0;
    height: $baseY;
    right: $baseX + $catwalkWidth;
    width: 200px;
    opacity: .5;
    z-index: 105;
    transform-origin: right bottom;
    transform: rotateY(90deg) translateX(-650px);
}

.floor {
    position: absolute;
    width: $baseX;
    height: $wallDistance;
    top: $baseY;
    background-color: blue;
    right: 0;
    transform-origin: top center;
    transform: rotateX(90deg);

    background: linear-gradient(to bottom,#e8dad1 67%,#e8dad1 67%,#dedddc 100%);

    box-shadow: inset 10px 0px 10px -10px #666;

}

.inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom,#e8dad1 67%,#e8dad1 67%,#dedddc 100%);

}

.catwalk {


    z-index: 10;

    width: 182px;
    height: 1835px;
    position: absolute;
    right: $baseX;
    top: $baseY;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform: rotateX(90deg) rotateZ(0deg) translateY(-495px) translateZ(3px);
    transform-origin: top center;

    overflow: visible;


    .inner {

        transform-style: preserve-3d;

        &:after {

            @extend .inner;

            content: "";
            display: block;

            right: auto;
            left: 100%;

            transform-origin: left top;

            transform: rotateY(90deg) !important;

            width: 3px;
            background: #666;


        }


    }


}

Answer 1

当元素“太长/太高”时，似乎会发生这种情况。我不确定究竟什么是太长，但降低高度(在我的示例中是 z 轴上的深度)解决了这个问题。为了保持房间效果和“深度”，我调整了 perspective 属性以使用较小的元素创建相同的房间尺寸。