css - 为什么我不能与背面的链接进行交互？

Question

1）。“链接”。我无法与“跟随我们！”背面的链接/图像进行交互。在底部翻转卡片。（iv'e 只使用 webkit）。帮助 ：'（

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

相信我，我已经尝试了一切，我只是厌倦了这一点。

Answer 1

要查看双方，您需要使用CSS 属性和值，-webkit-transform-style: preserve3d在您的div#flipthing.

您的卡片正在振动，因为这两个面没有完全对齐。当卡片翻转时，您的光标进入边缘，或导致振动或动画重置的背面元素。

尝试将您的两个<p>标签设置为完全相同，彼此堆叠：

div#flipthing { position: relative; }

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

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

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

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