Html 在Chrome3D中，一个div出现在相邻div的后面，但在firefox中出现在前面

我用display:inline块设置了一个div网格。当我沿y轴三维旋转它们时，部分div离开静止div的边界，因此它与其他相邻div重叠

在firefox中，它工作得非常完美，在查看器透视图中最接近的div部分更高，并且在相邻div的顶部可见

但在铬合金中，div的底边位于下方div的后面。我错过什么了吗

HTML

在div上滑动鼠标将缓慢旋转，以便可以看到重叠

给所有的div一个单独的id。例如：红色、蓝色、绿色

使用javascript更改悬停时的z索引。 下面是一个例子：（为所有3个人都这样做）

document.getElementById（'blue'）.hover.style.zIndex=document.getElementById（'red'）.style.zIndex+document.getElementById（'green'）.style.zIndex+1


这会将悬停时div的z索引设置为比其他2个div的z索引多1
我相信有一个更有效的方法。试着用它做个实验，可能是让一个函数在特定类的任何元素上悬停会使它的z索引大于所有元素。但这也会起作用

编辑：别忘了将其位置设置为相对位置

<div class="flip-container">
    <div class="flipper">
        <div class="front">
            <div style="background-color:red;height:162px;width:343px"> front</div>
        </div>
        <div class="back">
            <div style="background-color:red;height:162px;width:343px"> back</div>
        </div>
    </div>
</div>
<div class="flip-container">
    <div class="flipper">
        <div class="front">
            <div style="background-color:blue;height:162px;width:343px"> front</div>
        </div>
        <div class="back">
            <div style="background-color:blue;height:162px;width:343px"> back</div>
        </div>
    </div>
</div>

.flip-container {
    -webkit-perspective: 1000;
    transform: perspective(1000px);
    transform-style: preserve-3d;
    display:inline-block;
}
/* flip the pane when hovered */
.flip-container:hover .flipper {
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
    width: 343px;
    height: 162px;
}

/* flip speed goes here */
.flipper {
    transition: 6s;
    transform-style: preserve-3d;

   position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}