CSS perspective属性在Firefox中失效，求助制作书籍封面列表

嘿，我帮你排查下这个Firefox里perspective不工作的问题——这种3D变换的兼容性小坑确实挺常见的，咱们一步步来搞定它。

首先，先梳理下核心问题：Firefox对CSS 3D变换的渲染逻辑有明确要求，perspective必须作用在父容器上，同时子元素要配合设置transform-style: preserve-3d来继承3D空间，否则透视效果会失效。

先补全你的代码示例（方便测试） #

<div class="books">
  <div class="book verde">
    <img src="https://about.canva.com/wp-content/uploads/sites/3/2015/01/children_bookcover.png" />
  </div>
  <div class="book verde">
    <img src="https://about.canva.com/wp-content/uploads/sites/3/2015/01/children_bookcover.png" />
  </div>
  <div class="book verde">
    <img src="https://about.canva.com/wp-content/uploads/sites/3/2015/01/children_bookcover.png" />
  </div>
</div>

修复后的CSS代码（针对Firefox兼容优化） #

/* 父容器设置perspective，提供3D透视空间 */
.books {
  perspective: 1000px; /* 数值越大，透视效果越平缓，可按需调整 */
  display: flex; /* 可选：让书籍横向排列，适配列表布局 */
  gap: 25px;
  padding: 30px;
}

.book {
  transform-style: preserve-3d; /* 关键：确保子元素继承3D空间，Firefox必须设置 */
  transform: rotateY(-18deg); /* 给书籍添加旋转效果，测试透视是否生效 */
  box-shadow: 6px 6px 20px rgba(0,0,0,0.35); /* 可选：增强立体感 */
  transition: transform 0.3s ease; /* 可选：添加 hover 动画 */
}

.book:hover {
  transform: rotateY(-5deg); /* 可选：hover时拉近视角 */
}

.book img {
  max-width: 220px;
  height: auto;
  backface-visibility: hidden; /* 可选：避免图片背面在变换时显示 */
}

关键知识点解释 #

1. perspective的作用位置：
   如果你之前把perspective写在.book元素本身，Firefox会无法识别正确的3D空间——透视是父容器提供的“观察视角”，子元素在这个视角里做变换才会生效。

2. transform-style: preserve-3d：
   这个属性是Firefox渲染3D效果的核心开关，它告诉浏览器不要扁平化子元素的3D变换，必须在.book上设置，否则父容器的perspective等于白加。

3. 其他排查点：

   • 检查Firefox版本：如果是低于36的老旧版本，可能需要加-moz-前缀（比如-moz-perspective、-moz-transform-style），但现在新版Firefox已经完全支持标准属性，建议升级浏览器。
   • 避免冲突属性：如果父容器或.book设置了overflow: hidden，可能会破坏3D变换，尝试移除或调整这个属性。

把上面的CSS替换你现有的代码，在Firefox里刷新页面，应该就能看到带有透视效果的书籍封面列表了～

内容的提问来源于stack exchange，提问作者Juan Lopez