CSS 列内的 CSS 转换消失 (Chrome)

Question

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

问题:

我有一些 <li>分布在三个 CSS 列 ( column-count: 3 ) 上的标签，每个元素都有一个 transform其上的属性(property)。当我然后去转换子项时 within 这些 <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;
}

Updated Codepen ▸