CSS实现3D立方体时左、右、顶面无法显示，求技术解决方案

你的立方体部分面不显示的核心问题是CSS语法错误和3D变换参数计算错误，以下是具体修复方案：

问题分析 #

1. 无效的引号包裹角度值：所有rotateX()/rotateY()中的角度值被单引号包裹（比如rotateY('-90deg')），违反CSS语法规范，浏览器无法正确解析这些变换规则，导致对应面无法渲染。
2. 变换参数与顺序错误：部分面的位移方向错误，且变换顺序不符合3D空间逻辑，导致面被隐藏在立方体内部或偏移到可视区域外。

修复后的完整CSS代码 #

.container {
  width: 400px;
  height: 400px;
  border: 2px solid white;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 800px;
  perspective-origin: top right;
  background-color: #eee; /* 加背景色方便观察 */
}
.cube {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: cubeRotate 5s linear infinite;
}
.face {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.9;
    line-height: 200px; /* 调整行高让文字垂直居中 */
    text-align: center;
    font-size: 1.4rem;
    color: #fff; /* 加文字颜色提升可读性 */
}
.front {
    background-color: lightblue;
    transform: translateZ(100px);
}
.backward {
    background-color: lightgreen;
    transform: translateZ(-100px);
}
.left {
    background-color: peru;
    transform: rotateY(-90deg) translateZ(100px);
}
.right {
    background-color: blueviolet;
    transform: rotateY(90deg) translateZ(100px);
}
.top {
    background-color: brown;
    transform: rotateX(90deg) translateZ(100px);
}
.bottom {
    background-color: aqua;
    transform: rotateX(-90deg) translateZ(100px);
}
@keyframes cubeRotate {
  from {
    transform: rotateY(0deg);
  }
  to { 
    transform: rotateY(360deg);
  }
}

关键修复点说明 #

• 移除所有rotateX/Y()中角度值的单引号，确保CSS语法有效。
• 左侧面（.left）将translateZ(-100px)改为translateZ(100px)，使其从立方体内部移到左侧外部。
• 底面（.bottom）调整变换顺序为rotateX(-90deg) translateZ(100px)，遵循"先旋转再沿新轴位移"的3D变换逻辑，确保底面处于立方体底部。
• 额外调整了行高和文字颜色，提升立方体的可读性。

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