我有一个无序列表,其中有一些列表项使用 CSS 3D 转换充当翻转卡片。我希望他们通过点击列表项内的链接/ anchor 元素来翻转,这些链接也填满了整个列表项。
列表项在其默认的非翻转状态下看起来和运行良好,但是一旦我单击一个并且它翻转,其背面的可点击链接区域仅位于列表项的上半部分。当我在 Chrome 中检查时,链接区域仍然填满了列表项的整个高度,所以我不确定发生了什么。
fiddle :http://jsfiddle.net/chucknelson/B8aaR/
下面是我在各种元素上使用的变换属性的摘要(详情请参阅 fiddle ):
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 100% 1.5em;
-webkit-transform: rotateX(180deg);
请注意,我正在 Windows 上的 Chrome 28 中进行测试,我只是在 fiddle 中使用了 -webkit 前缀项。我也为任何困惑的 CSS 或标记道歉,这个问题让我迭代了一下。非常感谢任何帮助理解正在发生的事情!
2013 年 8 月 11 日更新:
我在对列表项进行 2D 转换时遇到了同样的问题(只是翻转元素,没有正面/背面)。在 <a>
的 CSS 中添加@thirtydot 的 translateZ(1px) 变换标签也修复了那个。所以看起来问题与 z 轴有关......但仅在链接的一部分上。也许这是浏览器中的错误?
最佳答案
这个问题可能是 webkit 渲染错误的结果,但解决方案是将链接的 Z 轴平移 1px - 这似乎将链接层推高并使其完全可点击。
要修复 3D 转换(通过来自@thirtydot http://jsfiddle.net/thirtydot/YCGjZ/7/ 的 fiddle ),需要一些 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 */
}
关于html - CSS转换后可点击链接区域意外变小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18167981/