css 翻转块与非翻转块交互，仅特定于 webkit答案

【问题标题】：css flipped block interaction with non flipped, only webkit specificcss 翻转块与非翻转块交互，仅特定于 webkit
【发布时间】：2013-12-03 03:11:17
【问题描述】：

好的，简单的css翻转

.container  
  .flipper.A
     .front  
     .back
  .flipper.B
     .front
     .back

这对我来说很重要，.front 和 .back 都有负的 top 和 left 绝对位置和.flipper 尺寸是0x0

当 flipper A 旋转 Y 180 度时，.back 是可见的，如果它们的位置相交，它会错误地与其他 .flippers 交互。例如，我点击脚蹼 B 中的链接，但如果 A 超过 B，则无法单击脚蹼 A 中的链接

工作示例在这里 http://jsfiddle.net/attenzione/g2at2/ - 你几乎可以点击测试 1，而不是点击测试 3

这种情况只出现在webkit浏览器上

有什么帮助吗？这是 webkit 的错误吗？

【问题讨论】：

【解决方案1】：

只需将您想要放在前面的 div 放在前面（在 3d 空间中）

CSS

div.flipped {
    -webkit-transform: rotateY(180deg) translateZ(-1px);
    z-index: 2;
}

translateZ 将其移向您

【讨论】：

非常感谢！这是 webkit 错误还是我的问题？因为 ff 工作正常顺便说一句，你的小提琴没有纠正，也许错过了保存？但没有它就得到了你的答案
我认为 webkit 的基础上有一个小错误。在 webkit 中，当您在 x 或 y 轴上旋转 180 度时，旋转会稍微偏离。这使得旋转的元素也可以“向下”一点。我猜是这样，但我相信这是这种奇怪行为的起源。至少在这方面，ff 效果更好。你是对的，忘记保存我的编辑...

【解决方案2】：

您的内部 .block 具有绝对定位是否有原因？这就是导致问题的原因。如果你必须在内部块上使用绝对定位，那么有两种方法可以解决这个问题。

您可以溢出隐藏外部元素 (.flipper) 或者您可以在未翻转的元素上添加 pointer-events:none，请记住这仅适用于 IE9

你真的应该尽量不要使用绝对定位，因为它不是必需的。

【讨论】：