CSS悬停在具有转换的元素上[Chrome/Webkit Bug]

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类在这些元素上根本不起作用.

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

关于如何解决这个问题的任何好主意？

Answer 1

您必须声明类的display属性.trans才能使其工作.而已.

这是工作解决方案.

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;
}

希望这可以帮助.