嵌套CSS 3D变换在Firefox中失效问题咨询

我在页面头部实现了一个带有视差滚动效果的CSS 3D动画书本，该效果在Chromium内核浏览器中运行正常，但在Firefox里完全失效。

移除.container的以下transform属性后，书本可以正常显示，但视差效果也随之消失：

.container {
    /* … */
    transform: translateZ(-1px) scale(2);
    /* … */
 }

效果对比 #

• Chromium浏览器效果：
• Firefox浏览器效果：

书本的3D效果基于在线生成器实现，我没有找到任何说明嵌套transform不被支持的文档，甚至能找到在Firefox中可正常运行的3D变换示例。

希望能解答以下任一问题：

• Firefox是否确实不支持该特性？
• 是否是我的代码存在错误，仅在Chromium中偶然生效？
• 是否存在跨浏览器的替代实现方案（优先纯CSS，无需JS）？

感谢！

最小可复现示例 #

CSS代码 #

.book-container {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 600px;
}

@keyframes initAnimation {
  0% {
    transform: rotateY(-90deg);
  }

  100% {
    transform: rotateY(-30deg);
  }
}

.book {
  width: 200px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-30deg);
  transition: 1s ease;
  animation: 1s ease 0s 1 initAnimation;
}

.container:hover .book {
  transform: rotateY(-90deg);
}

.book> :first-child {
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 300px;
  transform: translateZ(25px);
  border-radius: 0 2px 2px 0;
  box-shadow: 5px 5px 20px #666;
}

.book::after {
  z-index: 4;
  position: absolute;
  content: ' ';
  background-color: blue;
  left: 0;
  top: 3px;
  width: 48px;
  height: 294px;
  transform: translateX(172px) rotateY(90deg);
  background: linear-gradient(90deg,
      #fff 0%,
      #f9f9f9 5%,
      #fff 10%,
      #f9f9f9 15%,
      #fff 20%,
      #f9f9f9 25%,
      #fff 30%,
      #f9f9f9 35%,
      #fff 40%,
      #f9f9f9 45%,
      #fff 50%,
      #f9f9f9 55%,
      #fff 60%,
      #f9f9f9 65%,
      #fff 70%,
      #f9f9f9 75%,
      #fff 80%,
      #f9f9f9 85%,
      #fff 90%,
      #f9f9f9 95%,
      #fff 100%);
}

.book::before {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  content: ' ';
  width: 200px;
  height: 300px;
  transform: translateZ(-25px);
  background-color: #01060f;
  border-radius: 0 2px 2px 0;
  box-shadow: -10px 0 50px 10px #666;
}

.root {
  perspective: 1px;
  perspective-origin: center top;
  transform-style: preserve-3d;

  height: 150vh;
  max-height: 100%;
  overflow-x: hidden;
}

.container {
  padding-top: 20rem;
  transform: translateZ(-1px) scale(2);
  background-color: #666;
}

.container:hover {
  background-color: green;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.palceholde {
  transform: translateZ(0px);
  background-color: wheat;
  height: 150vh;
}

.book-cover {
  background-color: aqua;
  height: 100%;
  width: 100%;
  position: absolute;
  padding: 2rem;
  box-sizing: border-box;
  top: 0;
  left: 0;
}

HTML代码 #

<div class="root">
  <div class="container">
    <a class="book-container" href="" target="_blank" rel="noreferrer noopener">
      <div class="book">
        <div class="book-cover">
          <h1>Foo</h1>
          <strong>BAR</strong>
        </div>
      </div>
    </a>
  </div>
  <div class="palceholde">
  </div>
</div>

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