html - 转换后 onclick 仅针对元素的一半。如何解决？

Question

如果你看一下这里的小提琴（使用 chrome 或 safari），你可以看到一个例子。应用变换后，点击只针对我的红色矩形的下半部分，我需要它来定位整个东西。

我在这里有点迷失，好像你检查它占据整个空间的元素。我尝试包装到另一个 div 并设置单击 parent，但仍然无法正常工作。

我可以获得点击以定位整个元素吗？

Answer 1

看看这个：http: //jsbin.com/uxehev/2/edit。我添加了一个translateZ来抵消旋转后“墙”后面的元素部分（我很确定有一个更好的词，但我认为这是有道理的）。

相关变更如下：

-webkit-transform:translate3d(0px, -28px, 200px) perspective(1000px) rotateX(45deg) scale(0.43068391866913125)

Answer 2

我会将元素的可见部分显示为伪元素，将可点击部分显示为“真实”元素。它看起来像这样：

    #rect {
      width:200px;
      height:200px;
              background-color:transparent;
    }

    #rect::before {
      width:200px;
      height:200px;
      background-color:red;

      -webkit-transform:translate3d(0px, -28px, 0px) perspective(1000px) rotateX(45deg) scale(0.43068391866913125)

    }