我试着谷歌并在这里检查了类似的问题，但我一无所获：（
http://codepen.io/suez/pen/d563d6819f7df5c0b0f55db3e9bfc085?editors=010 - 这是一个演示。它在chrome中完美运行，但是我不能在Firefox中悬停/点击居中块的按钮，dev-tools检查器说我正在徘徊.rotater元素，当它有z-index: 3和{{1元素有.inner。所有元素都正确嵌套，z-index: 5和子元素的z-index比父元素大。主容器position: absolute/relative也具有透视属性，.scene具有.level,.rotater,.elem而transform-style: preserve-3d具有.elem。我试图解决这个问题，但现在我不知道该怎么做：（
以下是css的一部分（最好检查codepen上的完整版本）：
translateZ更新：如果我从.scene {
z-index: 1;
position: relative;
height: 100%;
perspective: 200vw;
}
.level {
z-index: 2;
position: absolute;
left: 0;
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
}
.rotater {
z-index: 3;
position: absolute;
top: 0;
left: 10%;
width: 80%;
height: 100%;
transition: transform 0.7s;
transform-style: preserve-3d;
}
.elem {
z-index: 4;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 1s;
backface-visibility: hidden;
font-size: 5rem;
text-align: center;
transform-style: preserve-3d;
@for $i from 1 through $level1Elems {
&:nth-child(#{$i}) {
transform: rotateY(0 - ($i - 1) * $level1Angle) translateZ($level1Z);
}
}
}
.inner {
z-index: 5;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #EEEEEE;
transition: transform 0.3s;
box-shadow: 0.6rem 1rem 1rem rgba(0,0,0,0.3);
}
.art-btn {
position: absolute;
z-index: 6;
top: 50%;
left: 50%;
width: 80%;
height: 10rem;
transform: translateX(-50%) translateY(-50%);
display: block;
outline: none;
border: 0.5rem solid;
background: transparent;
font-size: 5rem;
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
删除transform-style: preserve-3d;，那么在FF中一切正常，但它会完全打破我的布局：（
更新＃2：http://codepen.io/suez/pen/7b889e66f096a65459b3994c4b4e2a07 - 非常简单的重新创建bug。 5个元素，第一个有透视，2＆amp; 3＆amp; 4有preserve-3d，4个有translateZ（）。您可以在chrome中选择文本，但不能在FF中执行此操作。如果你将从4个元素中删除translateZ（-50vw），那么所有都将按预期工作，但translateZ绝对是必须的。
更新＃3：我为我的笔提出了黑客攻击（此处更新版本 - http://codepen.io/suez/pen/b9cd3de42a464aa98579cd009e6e83a6?editors=010）。我将.rotater 2px宽度/高度放置在中心，并将.rotater宽度/高度更改为vw / vh单位，并添加负左/顶部，使其置于中心，就像之前一样。无论如何它仍然有一些小问题，如果用户以某种方式徘徊2pdx / 2px区域的.rotater他在FF中丢失按钮焦点：D但我可以忍受这个。
答案 0 :(得分：0)
我尼可拉，我遇到了类似的问题。
在一个站点（我无法链接它，它是非公共的）与电梯缩放，缩放图像（与保留-3d）z索引与标题的z-index（上层）冲突。看起来像标题覆盖了图像（但标题位于顶部，图像位于标题布局下）。
我把变换风格放在初始图片上。