翻转卡：Href在内部卡上不起作用

编程问答 2022-06-05

问题描述

我正在使用Foundation CSS框架中的flip-card building block处理投资组合中的项目，并且每张卡的背面/内侧都有两个链接-href无效：@H_502_1@ 

<a href="https://github.com/JenJayme/lisas-pampered-paws" class="button float-left">Repo</a>

当我将其复制并粘贴到html的其他位置时，上面的代码可以正常工作。很简单 链接在翻盖卡的内侧上不起作用：（（我尝试为该链接添加一个事件侦听器，单击时在脚本的（$ document）.ready函数内部和外部都带有简单的单击警报，而且点击从不注册。@H_502_1@

有人建议修复这些链接吗？预先感谢您的帮助！@H_502_1@

您可以在我的index.html here中第287-288行看到完整的代码，并查看项目（带有无效链接）deployed prematurely here @H_502_1@

解决方法

在Stack Overflow或Foundation Forum上对这个问题没有答案之后，我继续四处寻找解决方案in another question here。问题是与卡片旋转和CSS中的Webkit转换线有关的故障。这是对我有用的修复程序：

前后平移一点，它们不会重叠。

示例：

.element .front {
    -webkit-transform: translateZ(1px);
}

.element .back {
    -webkit-transform: rotateY(180deg) translateZ(1px);
}

根据相关评论，“关键是仅将transformZ应用于刚刚翻转到背面的卡片，并且仅在翻转时才应用。这样，您就不会受到translateZ的模糊渲染的影响否则会导致。”

css-animationseventsfoundationhrefhtml