Css 应用较低zindex和旋转的元素忽略Google Chrome中较高的zindex

我试图创建一个框，我可以悬停，此外，我需要旋转悬停点击框后面的图像。但在谷歌Chrome中，图像的一部分在hitbox前面，另一部分在后面，尽管hitbox是

z-index:2

，图像是

z-index:1

CSS:

HTML:

集装箱内
内部保险箱

---

是否有解决方法或其他html标记我应该尝试？

我不明白问题出在哪里。@j08691如果有一部分在hitbox上，则立即触发

mouseleave

事件。FF和IE正确地处理了这个问题。从视觉上看，图像在点击框后面。问题是鼠标事件的行为不同，还是问题出在哪里？

.hitbox {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    background-color: rgba(255,50,0,0.3);
}
img.img-ele {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-transform: rotateX(15deg) rotateY(12deg);
    -moz-transform: rotateX(15deg) rotateY(12deg);
    -ms-transform: rotateX(15deg) rotateY(12deg);
    -o-transform: rotateX(15deg) rotateY(12deg);
    transform: rotateX(15deg) rotateY(12deg);
}

<div class="container">
    <div class="box">
        <div class="hitbox"></div>
        <img src="http://placehold.it/111x89/000" class="img-ele" />
    </div>
</div>
<div class="inside-container">Inside container</div>
<div class="inside-hitbox">Inside hitbox</div>