css翻转块交互与非翻转，只有webkit特定

Question

okey，简单的css翻转

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

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

当flipper A旋转180度时，.back可见，如果他们的位置相交，则会错误地与其他.flippers进行互动。例如，我点击鳍状肢B中的链接，但如果A超过B，则无法点击鳍状肢A中的链接

工作示例在这里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

Answer 2

你的内部.block有绝对定位的原因吗？这就是造成这个问题的原因。如果你必须在内部块上使用绝对定位，那么有两种方法围绕它。

你可以溢出隐藏外部元素（.flipper） 或者你可以在unflipped元素上添加指针事件：none，请记住这只能回到IE9

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