CSS 列中的 CSS 转换消失（Chrome）

Question

我遇到了可能只是Chrome 中的一个错误，但我希望得到另一组关注，并希望告诉我我是否在这里遗漏了什么。

问题：

我有一些<li>标签分布在三个 CSS 列 ( column-count: 3) 上，每个项目都有一个transform属性。然后当我在这些<li>标签中转换子项时，不在第一列中的每个子项都消失了。

这是 CodePen 上的一个内置示例：https ://codepen.io/andyranged/pen/WMdrxR

同样，这仅发生在 Chrome 中。在此先感谢您提供的任何帮助！

Answer 1

其实，问题是你transform: translateY(0px)在ul.main > li这是一个2D变换...然后你使用rotateZ的ul.main ul a是3D变换，其造成这个问题的可视性...

因此，要解决这个要么删除transform: translateY(0px)从ul.main > li我认为这是更好，因为它没有平均申请translateY(0px)...

..或适用backface-visibility: hidden于ul.main ul a如果您有任何进一步的计划，以利用translateY(0px)

ul.main ul a {
  -webkit-transform: rotateZ(5deg);
  transform: rotateZ(5deg);
  backface-visibility: hidden;
}