我有一个无序列表,其中包含一些使用 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 中为标签添加 @thirtydot 的 translateZ(1px) 转换<a>
也修复了该标签。所以看起来这个问题与 z 轴有关......但仅在部分链接上。也许这是浏览器中的错误?