为什么我不能与背面的链接互动？

Question

1）。 “Link”。我无法与“关注我们！”背面的链接/图像进行互动。翻转卡在底部。 （我只使用webkit）。帮助：'（

2）。此外，当您将光标缓慢移向翻转卡时，如果光标的位置不固定，卡会振动。与此不同：http://css3.bradshawenterprises.com/flip/

相信我，我试过一切，我只是厌倦了这一点。

Answer 1

要查看双方，您需要使用div#flipthing上的CSS property and value, -webkit-transform-style: preserve3d。

你的卡片正在振动，因为两张脸并没有完全对齐。当卡片翻转时，光标会进入边缘或后部元素，导致振动或重置动画。

尝试将两个<p>标记设置为完全相同，堆叠在彼此之上：

div#flipthing { position: relative; }

div#flipthing p {
    position: absolute;
    top: 0;
    left: 0;
}

div#flipthing p:first-child {
    z-index: 10;
}

这将允许您的第一段叠加在第二段之上。

此外，对于您的背面，您应该将-webkit-transform和-webkit-backface-visibility放在段落而不是嵌套表格上。