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

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或标记道歉,这个问题让我迭代了一下.非常感谢任何有助于理解正在发生的事情的帮助!

更新8/11/2013:
我在列表项上进行2D转换时遇到了同样的问题(只是翻转项目,没有前/后).在CSS中为<a>标签添加@ 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 */
}