css flipped block interaction with non flipped, only webkit specific

Question

好吧，简单的 css 翻转

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

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

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

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

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

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

Answer 1

只需将您想要在前面的 div 带到前面(在 3d 空间中)

CSS

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

translateZ 将它移向你

corrected fiddle