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

我在Chrome中遇到了可能只是一个bug的问题，但我希望能再次看到这个问题，并希望告诉我我是否遗漏了什么

问题：

我有一些

标记，它们分布在三个CSS列上（

列计数：3

），每个项上都有一个

transform

属性。然后，当我在这些

标记中转换子项时，不在第一列中的每个子项都会消失

下面是CodePen的一个内置示例：

---

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

实际上问题在于你的

变换：translateY（0px）

在

ul.main>li

中，这是一个二维变换…然后你在

ul.main-ul-a

中使用

rotateZ

这是一个三维变换，导致了这个可见性问题

因此，要解决这个问题，可以从

ul.main>li

中删除

转换：translateY（0px）

，我认为这样更好，因为它没有应用

translateY（0px）

…或将

backface visibility:hidden

应用于

ul.main ul a

如果您有任何进一步计划使用

translateY（0px）

---

实际上问题在于你的

转换：translateY（0px）

在

ul.main>li

中是一个二维转换…然后你在

ul.main-ul-a

中使用

rotateZ

这是一个三维转换，导致了这个可见性问题

因此，要解决这个问题，可以从

ul.main>li

中删除

转换：translateY（0px）

，我认为这样更好，因为它没有应用

translateY（0px）

…或将

backface visibility:hidden

应用于

ul.main ul a

如果您有任何进一步计划使用

translateY（0px）

---

谢谢您的回答！这很奇怪——在这个特殊的例子中，它似乎与作为3D变换的旋转无关。如果我将那些子

标记改为简单的

translateX（15px）

（这是一个二维变换），问题仍然存在。无论哪种方式，您的答案都是正确的，因为这最终是一个

背面可见性问题！顺便说一句-我完全同意你的观点，父元素上的
translateY（0）
是无用的（lol），但它存在的原因是因为在实践中，我在从
translateY（2em）
到
translateY（0em）
中设置了这些元素的动画。我还想问你是否认为这种行为仍然有缺陷。。。如果它在第一列中起作用，那么它不应该在没有背面可见性的后续列中起作用吗？（假设我只使用2D变换）？这也解决了我的问题。我不认为问题在于2d和3d变换的混合使用，我认为浏览器应该能够处理它。我会说这是一个bug。只是一个更新：它确实是一个bug。我提交了一份Chrome bug报告，在几个Chrome版本之前就已经解决了！谢谢你的回答！这很奇怪——在这个特殊的例子中，它似乎与作为3D变换的旋转无关。如果我将那些子
标记改为简单的
translateX（15px）
（这是一个二维变换），问题仍然存在。无论哪种方式，您的答案都是正确的，因为这最终是一个
背面可见性问题！顺便说一句-我完全同意你的观点，父元素上的
translateY（0）
是无用的（lol），但它存在的原因是因为在实践中，我在从
translateY（2em）
到
translateY（0em）
中设置了这些元素的动画。我还想问你是否认为这种行为仍然有缺陷。。。如果它在第一列中起作用，那么它不应该在没有背面可见性的后续列中起作用吗？（假设我只使用2D变换）？这也解决了我的问题。我不认为问题在于2d和3d变换的混合使用，我认为浏览器应该能够处理它。我会说这是一个bug。只是一个更新：它确实是一个bug。我提交了一份Chrome bug报告，在几个Chrome版本之前就已经解决了！
ul.main ul a {
  -webkit-transform: rotateZ(5deg);
  transform: rotateZ(5deg);
  backface-visibility: hidden;
}