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

Question

我遇到了 Chrome 中可能只是一个错误的问题，但我希望得到另一组关注，并希望告诉如果我在这里遗漏了一些东西。

问题：

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

同样，这只发生在 Chrome。提前感谢您提供的任何帮助！

Answer 1

实际上问题是你在 ul.main > li 中的 transform: translateY(0px) 这是一个 2D 变换...然后你在 ul.main ul a 中使用 rotateZ 这是 3D 变换导致这个可见性问题...

因此，要解决此问题，请从 ul.main > li 中删除 transform: translateY(0px)，我认为这更好，因为它无法应用 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;
}

CSS transforms within CSS columns disappear (Chrome)