CSS 转换后可点击的链接区域意外变小答案

【问题标题】：Clickable link area unexpectedly smaller after CSS transformCSS 转换后可点击的链接区域意外变小
【发布时间】：2013-08-12 15:25:11
【问题描述】：

我有一个无序列表，其中包含一些使用 CSS 3D 变换作为翻转卡片的列表项。我希望它们通过单击列表项内的链接/锚元素来翻转，这些链接也填满了整个列表项。

列表项在默认的非翻转状态下看起来和运行良好，但是一旦我单击一个并翻转，它背面的可单击链接区域仅位于列表项的上半部分。当我在 Chrome 中检查时，链接区域仍然填满了列表项的整个高度，所以我不确定发生了什么。

小提琴：http://jsfiddle.net/chucknelson/B8aaR/

下面是我在各种元素上使用的转换属性的摘要（详见小提琴）：

-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 100% 1.5em;
-webkit-transform: rotateX(180deg);

请注意，我正在 Windows 上的 Chrome 28 中进行测试，我只是在小提琴中使用 -webkit 前缀项。我也为任何凌乱的 CSS 或标记道歉，这个问题让我反复了一点。非常感谢任何有助于了解正在发生的事情！

2013 年 8 月 11 日更新：
我在列表项上进行 2D 变换时遇到了同样的问题（只是翻转项目，没有前/后）。在 CSS 中为 <a> 标签添加 @thirtydot 的 translateZ(1px) 变换也修复了这个问题。所以看起来这个问题与 z 轴有关......但仅在部分链接上。也许这是浏览器中的错误？

【问题讨论】：

我正在努力。要点是，它基本上只是单击链接，而不是 div。我们希望 div 是可点击的。
我很想知道为什么链接不保持不变，它在一种状态下完全可点击，并且在翻转状态下的检查器中具有相同的属性。
@Kyle：想知道同样的事情。从那个特定的翻转容器中删除
会弄乱一切，但它确实告诉你一件事，这些 div 再次变得完全可点击。需要考虑的事情。

【解决方案1】：

这个问题可能是 webkit 渲染错误的结果，但解决方案是将链接的 Z 轴平移 1px - 这似乎将链接层向上推并使其完全可点击。

要修复 3D 变换（通过来自 @thirtydot http://jsfiddle.net/thirtydot/YCGjZ/7/ 的小提琴），需要一些 javascript：

    setTimeout(function() {
        flipTarget.find('div.back a').css('-webkit-transform', 'translateZ(1px)');
        flipTarget.find('div.back a').css('transform', 'translateZ(1px)');
    }, 600);

当使用 2D 变换时，在 CSS 类中添加 translateZ 有效：

.flipped {
    border-top: 1px solid black;
    background-color: #555;

    -webkit-transform: rotateX(180deg);
}

.flipped a {
    color: #eee;
    text-decoration: line-through;

    -webkit-transform: scaleY(-1) translateZ(1px); /* the fix */
}

【讨论】：