Question

我有一个无序列表，其中包含一些使用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变换时遇到同样的问题（只是翻转项目，没有前/后）。在<a>标签的CSS中添加@ thirtydot的translateZ（1px）变换也修复了该变换。所以看起来这个问题与z轴有关......但仅限于链接的一部分。也许这是浏览器中的错误？

Answer 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 */
}

CSS转换后，可点击链接区域意外缩小

1 个答案: