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;
}
}
}