CSS 3D立方体旋转时部分面出现裁切凹陷问题的原因排查求助

大家好，我用HTML/CSS搭配JavaScript做了一个可旋转的3D立方体，整体效果基本符合预期，但遇到了一个完全摸不着头脑的问题：立方体的每个面都是独立的div元素，在特定旋转角度下，部分面会出现「裁切」的异常情况。

问题复现方式 #

最直观的复现方法就是按一次向下方向键：此时立方体的顶部（红色）和底部（绿色）面会像是向内“缩进”了近四分之一的长度，立方体的内部直接暴露了出来，看起来很怪异。

我已经排查过的方向 #

• 排除性能问题：一开始我以为是电脑性能不足，部分面的变换没及时生效，但不管动画速度多慢，甚至让立方体静止在那个角度，问题都依然存在。
• 排除代码拼接bug：因为最初的代码是从几个不同来源拼凑的，我一开始也没完全吃透逻辑，所以怀疑是代码里藏了bug。于是我逐行梳理代码，把它精简到最核心的状态，结果问题还是一模一样（不过倒是把代码逻辑彻底搞懂了，也算意外收获😂）。

发现的线索 #

我尝试隐藏除了上下两个面之外的所有面，结果问题居然消失了！另外我还发现，把代码嵌入到帖子里时问题不会重现，只有在单独的演示页面里才能复现，所以我怀疑这可能和视口的形状有关？

我还做了一个纯CSS版本的演示，把立方体固定在出现裁切问题的角度，同样能看到这个异常。

核心代码片段 #

JavaScript 旋转逻辑

// 获取立方体及各面元素
const cube = document.querySelector(".cube");
const topFace = document.querySelector(".cube-face-top");
const bottomFace = document.querySelector(".cube-face-bottom");

// 保存初始变换矩阵
const resetMatrix = new DOMMatrix();
let matrix = new DOMMatrix();

// 应用旋转变换的核心函数
function applyRotation(x, y, z, angle) {
  const newMatrix = new DOMMatrix().rotateAxisAngle(x, y, z, angle).multiply(matrix);
  cube.style.transform = newMatrix;
  matrix = newMatrix;
}

// 键盘事件监听
function keyboardTurn(event) {
  switch (event.key) {
    case "ArrowRight":
      applyRotation(0, 1, 0, 45);
      break;
    case "ArrowLeft":
      applyRotation(0, 1, 0, -45);
      break;
    case "ArrowUp":
      applyRotation(1, 0, 0, 45);
      break;
    case "ArrowDown":
      applyRotation(1, 0, 0, -45);
      break;
    case "r":
      cube.style.transform = resetMatrix;
      matrix = resetMatrix;
      break;
    default:
      break;
  }
}
document.addEventListener("keydown", keyboardTurn);

CSS 3D布局核心

body {
  margin: 0;
  box-sizing: border-box;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
}

.perspective-container {
  perspective: 500vmin;
  width: 96vmin;
  height: 96vmin;
}

.z-translation-container {
  position: relative;
  transform: translateZ(-48vmin);
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 2s;
}

.cube-face {
  box-sizing: border-box;
  position: absolute;
  width: 96vmin;
  height: 96vmin;
  border: 0.5vmin solid black;
  opacity: 0.55;
}

.cube-face-top {
  transform: rotateX(90deg) translateZ(48vmin);
  background-color: red;
}

.cube-face-bottom {
  transform: rotateX(-90deg) translateZ(48vmin);
  background-color: green;
}

有没有大佬遇到过类似的3D变换异常？或者能帮我分析下这个裁切问题到底是怎么回事吗？

内容来源于stack exchange