html - 在Firefox中，旋转 Angular 为正的元素位于顶部

我的页面上有两个图像，其中应用了透视图和旋转角度。图像完全定位并且彼此稍微重叠。现在，其中一个图像（图像B）位于rotateY(0deg);上，另一个图像（图像A）具有rotateY(15deg);，并在悬停时转到rotateY(-15deg);。

问题是，当图像A的角度为15度时，它在图像B后面，但是在悬停时当角度变为-15度时，它与图像B重叠。在Chrome中不会发生这种情况。我已经尝试过抗锯齿的方法，并保留3d以及其他我能想到的东西。在Firefox中这种行为的原因可能是什么？



编辑：这是一些代码：

<div class="col-sm-4" id="phone-container">
   <img id="htc" src="img/htc.png">
   <img id="samsung" src="img/samsung.png">
</div>

和CSS：

#phone-container{
    position: relative;
    height: 500px;
    perspective: 500px;
}
#phone-container #htc{
    width: 42%;
    position: absolute;
    top: 34%;
    left: 50%;
    z-index: 1;
    margin-left: -138px;
    transform: rotateY(15deg);
    transition: transform 0.3s;
}
#phone-container #htc:hover{
    transform: rotateY(-15deg);
}
#phone-container #samsung{
    width: 44%;
    position: absolute;
    top: 35%;
    right: 50%;
    z-index: 2;
    margin-right: -139px;
    transform: rotateY(0deg);
}

最佳答案

我遇到了同样的问题，并且解决了translateZ的问题。

translateZ的单位是像素，您必须将元素的Z轴向后移动到旋转的元素上方。

对于您的情况，您应该执行以下操作：

#phone-container #samsung{
  width: 44%;
  position: absolute;
   top: 35%;
  right: 50%;
  z-index: 2;
  margin-right: -139px;
  transform: rotateY(0deg) translateZ(__px);
                                      ^ Your desired pixels
}