1
我的问题可能有点复杂，我正在使用屏幕截图正确说明我的问题。如果我谈论浏览器，我总是提到最新版本。CSS 3D变换：倒转元素选择
我用3D变换建了一个房间。
这是在Chrome
房间。如果我将鼠标悬停在开发者工具检查的元素，每个元素除了地板正确（蓝色）强调。
这是地板是如何强调：
它主要强调了消失点（或如何在地板会看，如果这将会是无穷大）。
现在我不会有突出显示开发工具的问题。问题是Firefox不会显示那样的地板。这是火狐 - 突出相同的部分 - 不显示楼层：
地板与transform: rotateX(90deg)旋转。这是最让我困惑的事情。如果我将地板移回-35px，则根本没有亮点。 正好-36px，地板正确突出显示并且可见！
这是铬显示地板与translate3d(0px, -35px, 0px)的加法。亮点失踪！ （我删除了墙，以更好地看到地板上）
这是铬与translate3d(0px, -36px, 0px)。
地板是正确的高亮显示！同样在Firefox中，现在正确显示地板！
地板（以FF）和错误选择通过开发工具（铬& FF）的disapearing只出现在楼的旋转围绕它的80幅100度之间的x轴。地板下方和上方突出显示并标记正确。除了铬在地板上显示，即使它在开发工具中突出显示（错误？），它也一样。
这是火狐显示楼层为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;
}
}
}