Html CSS立方体旋转不正确

我正在尝试用基本的HTML和CSS制作一个立方体。我已经在他们的位置上旋转了每一边，但是在旋转整个立方体时，我可以看到一些空白区域。我不知道是什么问题。请帮我解决这个问题

身体{ 宽度：100vw； 高度：100vh； 保证金：0； 显示器：flex； 弯曲方向：立柱； 对齐项目：居中； 对齐内容：中心；} 容器{ 位置：相对位置； 宽度：100px； 高度：100px； 边界半径：20px； 背景：透明； 透视图：9990px； 变换：旋转80度； 变换样式：保留-3d； 变换原点：50px 50px 0；} 容器。脸{ 宽度：100px； 高度：100px； 背景：ddd； 位置：绝对位置； 过渡：均为0.2s； 背面可见性：隐藏； 边框：1px纯黑；} 容器面1{ 背景：绿色； transform:translateZ-50px；} 容器面2{ 背景：红色； 变换：translateX50px旋转90度；} 容器面3{ 背景：蓝色； 变换：translateX-50px旋转90度；} 容器面4{ 背景：黄色； 转换：translateZ50px；} 容器面5{ 背景：紫色； 变换：translateY-50px旋转90度；} 容器面6{ 背景：青色； 变换：translateY50px旋转90deg；}

---

你几乎很好，你需要在主体元素（立方体的父元素）上定义透视图，你可以去掉背面的可见性：隐藏

身体{ 宽度：100vw； 高度：100vh； 保证金：0； 显示器：flex； 弯曲方向：立柱； 对齐项目：居中； 证明内容：中心； 透视图：500px；/*此处*/ } 容器{ 位置：相对位置； 宽度：100px； 高度：100px； 边界半径：20px； 背景：透明； 变换：旋转20度旋转30度； 变换样式：保留-3d； 变换原点：50px 50px 0； } 容器。脸{ 宽度：100px； 高度：100px； 背景：ddd； 位置：绝对位置； 过渡：均为0.2s； /*背面可见性：隐藏*/ 边框：1px纯黑； } 容器面1{ 背景：绿色； 转换：translateZ-50px； } 容器面2{ 背景：红色； 变换：translateX50px旋转90度； } 容器面3{ 背景：蓝色； 变换：translateX-50px旋转90度； } 容器面4{ 背景：黄色； 转换：translateZ50px； } 容器面5{ 背景：紫色； 变换：translateY-50px旋转90度； } 容器面6{ 背景：青色； 变换：平移50px旋转90度； }

---

你几乎很好，你需要在主体元素（立方体的父元素）上定义透视图，你可以去掉背面的可见性：隐藏

身体{ 宽度：100vw； 高度：100vh； 保证金：0； 显示器：flex； 弯曲方向：立柱； 对齐项目：居中； 证明内容：中心； 透视图：500px；/*此处*/ } 容器{ 位置：相对位置； 宽度：100px； 高度：100px； 边界半径：20px； 背景：透明； 变换：旋转20度旋转30度； 变换样式：保留-3d； 变换原点：50px 50px 0； } 容器。脸{ 宽度：100px； 高度：100px； 背景：ddd； 位置：绝对位置； 过渡：均为0.2s； /*背面可见性：隐藏*/ 边框：1px纯黑； } 容器面1{ 背景：绿色； 转换：translateZ-50px； } 容器面2{ 背景：红色； 变换：translateX50px旋转90度； } 容器面3{ 背景：蓝色； 变换：translateX-50px旋转90度； } 容器面4{ 背景：黄色； 转换：translateZ50px； } 容器面5{ 背景：紫色； 变换：translateY-50px旋转90度； } 容器面6{ 背景：青色； 变换：平移50px旋转90度； }

---

我只是在容器上做了一个轻编辑。脸部CSS规则，空白区域是不可见的。你需要的东西好吗

身体{ 宽度：100vw； 高度：100vh； 保证金：0； 显示器：flex； 弯曲方向：立柱； 对齐项目：居中； 对齐内容：中心；} 容器{ 位置：相对位置； 宽度：100px； 高度：100px； 边界半径：20px； 背景：透明； 透视图：9990px； 变换：旋转80度； 变换样式：保留-3d； 变换原点：50px 50px 0；} 容器。脸{ 宽度：100px； 高度：100px； 背景：ddd； 位置：绝对位置； 过渡：均为0.2s； 背面可见性：可见；/*已从隐藏更改为可见*/ 边框：1px纯黑；} 容器面1{ 背景：绿色； transform:translateZ-50px；} 容器面2{ 背景：红色； 变换：translateX50px旋转90度；} 容器面3{ 背景：蓝色； 变换：translateX-50px旋转90度；} 容器面4{ 背景：黄色； 转换：translateZ50px；} 容器面5{ 背景：紫色； 变换：translateY-50px旋转90度；} 容器f ace6{ 背景：青色； 变换：translateY50px旋转90deg；}

---

我只是在容器上做了一个轻编辑。脸部CSS规则，空白区域是不可见的。你需要的东西好吗

身体{ 宽度：100vw； 高度：100vh； 保证金：0； 显示器：flex； 弯曲方向：立柱； 对齐项目：居中； 对齐内容：中心；} 容器{ 位置：相对位置； 宽度：100px； 高度：100px； 边界半径：20px； 背景：透明； 透视图：9990px； 变换：旋转80度； 变换样式：保留-3d； 变换原点：50px 50px 0；} 容器。脸{ 宽度：100px； 高度：100px； 背景：ddd； 位置：绝对位置； 过渡：均为0.2s； 背面可见性：可见；/*已从隐藏更改为可见*/ 边框：1px纯黑；} 容器面1{ 背景：绿色； transform:translateZ-50px；} 容器面2{ 背景：红色； 变换：translateX50px旋转90度；} 容器面3{ 背景：蓝色； 变换：translateX-50px旋转90度；} 容器面4{ 背景：黄色； 转换：translateZ50px；} 容器面5{ 背景：紫色； 变换：translateY-50px旋转90度；} 容器面6{ 背景：青色； 变换：translateY50px旋转90deg；}