Question

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

我建造了一个带3D变换的房间。

这是Chrome中的房间

enter image description here

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

这是如何强调发言权：

enter image description here

它基本上突出了消失点（或者如果地板无限大，地板的外观如何）。

现在我对开发工具突出显示没有问题。问题是firefox不会像那样显示出底线。这是firefox - 突出显示相同的部分 - 没有显示地板：

enter image description here

地板以transform: rotateX(90deg)旋转。这里最让我困惑的是什么。如果我将地板向后移动-35px，则根本没有突出显示。 对于-36px，地板正确突出显示并可见！

这是Chrome显示添加translate3d(0px, -35px, 0px)的楼层。缺少亮点！（我拆除了墙壁以便更好地看到地板）

enter image description here

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

enter image description here

地板正确突出显示！在firefox中也是如此，现在正确地显示了地板！

enter image description here

地板的消失（在FF中）和通过开发工具（chrome＆amp; ff）的错误选择仅出现在地板围绕它的x轴在80和100度之间旋转。地板下方和上方突出显示并正确标记。对于chrome来说也是如此，除非chrome正在显示地板，即使它在开发工具中突出显示（错误地？）。

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

enter image description here

所以我的结论是，如果我在开发工具中修改突出显示，我将能够在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轴的深度）解决了这个问题。保持房间效果和深度＆＃34;我调整了perspective属性以使用较小的元素创建相同的房间尺寸。

CSS 3D变换：倒置元素选择

1 个答案: