CSS 悬停在带有转换的元素上 [Chrome/Webkit 错误]

Question

我有一个 div，我正在使用 CSS 对其进行转换。实际改造如下：

.trans{
  transform-origin: right center;
  transform: perspective( 600px ) rotateY( -30deg) translateZ(1px);
  -webkit-transform-origin: right center;
  -webkit-transform: perspective( 600px ) rotateY( -30deg) translateZ(150px);
}

据我所知，问题在于这会在页面的“后面”深度旋转 div。它正确显示，但似乎无法正确与鼠标交互。所以我的悬停状态的 CSS 类在这些元素上根本不起作用。

您可以查看reduced testcase。在结果窗格中，请注意左侧的正方形不会正确更改背景颜色，但右侧的正方形会正确更改背景颜色。这个错误发生在 Chrome 上，但在我测试时没有发生在 Firefox 或 IE 上。

关于如何解决这个问题有什么好的想法吗？

Answer 1

您必须为.trans 类声明一个display 属性才能使其工作。就是这样。

这里是Working Solution。

HTML：

<div class="square trans">
    <p>Text Here!</p>
</div>
<div class="square">
    <p>Text Here!</p>
</div>

CSS：

.square{
    background-color: #ffffff;
    border-radius: 4px;
    border-color: #222222;
    border width: 6px;
    border-style: dotted;
    display:inline-block;
    float:left;
}

.trans{
    transform-origin: right center;
    transform: perspective( 600px ) rotateY( -30deg);
    -webkit-transform-origin: right center;
    -webkit-transform: perspective( 600px ) rotateY( -30deg);
    display:table-cell;

}

/* Doesn't work on transformed square! */
.square:hover{
     background-color: #ff0000;
}

希望这会有所帮助。