看起来你遇到的是Chrome和Firefox对3D变换与多列布局组合的兼容性差异问题，我来帮你一步步排查：

1. 检查perspective的作用范围与布局干扰 #

Firefox对perspective的处理相对严格，它需要直接作用在3D变换元素的父容器上，而如果父容器同时使用column-count这类流式布局属性，很可能会干扰3D空间的创建逻辑。你当前的#grid同时承担了多列布局和3D变换载体的角色，这在Firefox里容易出问题。

建议调整结构，给#grid套一层独立容器，把3D相关属性移到这个外层容器上：

#perspective {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 移除这里的perspective，交给子容器处理 */
}

#grid-3d-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 1000px;
  perspective: 2500px; /* 把perspective移到这里 */
  transform-style: preserve-3d; /* 强制保留3D空间上下文 */
}

#grid {
  padding-right: 1em;
  width: 100%;
  column-count: 4;
  column-gap: 0;
  padding-bottom: 15px;
  transform-origin: top right;
  /* 你的其他原有样式 */
}

2. 修正transform-origin的解析兼容性 #

Firefox对transform-origin的关键字（比如top right）在复杂布局下的解析可能和Chrome不一致，试试用百分比值替代关键字：

#grid {
  /* 用100%代表右边缘，0%代表上边缘，替代top right */
  transform-origin: 100% 0%;
}

3. 确保子元素的3D空间继承 #

如果#grid内部还有子元素做3D变换（比如rotateX/rotateY），必须给#grid加上transform-style: preserve-3d，Firefox默认不会自动保留父容器的3D空间：

#grid {
  /* 新增这行，确保子元素能继承3D空间 */
  transform-style: preserve-3d;
}

4. 规避绝对定位与多列布局的冲突 #

#grid同时使用position:absolute和column-count，Firefox对这种组合的布局计算存在已知bug。可以把绝对定位移到外层容器，让#grid改用相对定位：

#grid-3d-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 1000px;
}

#grid {
  position: relative; /* 替换为相对定位 */
  padding-right: 1em;
  column-count: 4;
  column-gap: 0;
  padding-bottom: 15px;
  transform-origin: 100% 0%;
  transform-style: preserve-3d;
}

你可以先按这个顺序尝试调整，尤其是把3D属性从多列元素上分离出来，这是Firefox中3D变换失效的高频原因。如果还有问题，可以补充#grid内部元素的变换代码，我再帮你进一步分析。

内容的提问来源于stack exchange，提问作者Tamjid Hossain