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

Question

1)。 “Link”。我无法与“关注我们！”背面的链接/图像进行交互。在底部翻转卡片。 （iv'e 只使用 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 放在段落而不是嵌套表上。