React.js中3D旋转立方体如何显示全部6个面？

问题根源 #

你的立方体两个面的3D定位错误，同时动画关键帧的旋转逻辑未覆盖所有面的展示角度，导致旋转过程中仅能看到4个面。

修复步骤 #

1. 修正各面的3D空间定位

当前face3、face4、face5的transform组合存在错误，调整为正确的立方体六面定位：

.cubespinner {
  /* 保留原有基础样式 */
  .face1 {
    transform: translateZ(100px);
    color: #dd0031;
  }
  .face2 {
    transform: rotateY(90deg) translateZ(100px);
    color: #f06529;
  }
  .face3 {
    transform: rotateY(180deg) translateZ(100px); /* 修正：定位立方体背面 */
    color: #28a4d9;
  }
  .face4 {
    transform: rotateY(-90deg) translateZ(100px); /* 修正：定位立方体左侧面 */
    color: #ec4d28;
  }
  .face5 {
    transform: rotateX(90deg) translateZ(100px); /* 修正：定位立方体顶面 */
    color: #efd81d;
  }
  .face6 {
    transform: rotateX(-90deg) translateZ(100px); /* 定位立方体底面 */
    color: #5ed4f4;
  }
}

同时注意你JS图标的颜色值写错：#dd700改为#efd81d（标准JS黄色），避免颜色显示异常。

2. 调整动画关键帧，覆盖所有面展示

原keyframes的旋转逻辑有遗漏，调整后让每个周期阶段对应展示一个新面：

@keyframes spincube {
  0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  16.67% { transform: rotateY(-90deg); } /* 展示face2 */
  33.33% { transform: rotateY(-180deg); } /* 展示face3 */
  50% { transform: rotateY(-270deg); } /* 展示face4 */
  66.67% { transform: rotateX(90deg); } /* 展示face5 */
  83.33% { transform: rotateX(-90deg); } /* 展示face6 */
  100% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } /* 回到初始状态 */
}

每个1/6周期（2秒）切换一个面视角，确保6个面都能被完整展示。

3. 补充父容器透视效果

给stage-cube-cont添加透视，强化3D层次感，避免面重叠视觉问题：

.stage-cube-cont {
  perspective: 1000px;
  width: 200px;
  margin: 0 auto;
}

修正后的完整代码 #

React组件（修正颜色值）

<div className="stage-cube-cont">
  <div className="cubespinner">
    <div className="face1">
      <FontAwesomeIcon icon={faPython} color="#DD0031" />
    </div>
    <div className="face2">
      <FontAwesomeIcon icon={faHtml5} color="#F06529" />
    </div>
    <div className="face3">
      <FontAwesomeIcon icon={faCss3} color="#28A4D9" />
    </div>
    <div className="face4">
      <FontAwesomeIcon icon={faGitAlt} color="#EC4D28" />
    </div>
    <div className="face5">
      <FontAwesomeIcon icon={faJsSquare} color="#efd81d" />
    </div>
    <div className="face6">
      <FontAwesomeIcon icon={faReact} color="#5ED4F4" />
    </div>
  </div>
</div>

CSS代码

.stage-cube-cont {
  perspective: 1000px;
  width: 200px;
  margin: 0 auto;
}

.cubespinner {
  animation-name: spincube;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 12s;
  transform-style: preserve-3d;
  transform-origin: 100px 100px 0;

  div {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    background: rgba(255, 255, 255, 0.4);
    text-align: center;
    font-size: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 20px 0px lightyellow;
    backface-visibility: visible;
  }

  .face1 {
    transform: translateZ(100px);
    color: #dd0031;
  }
  .face2 {
    transform: rotateY(90deg) translateZ(100px);
    color: #f06529;
  }
  .face3 {
    transform: rotateY(180deg) translateZ(100px);
    color: #28a4d9;
  }
  .face4 {
    transform: rotateY(-90deg) translateZ(100px);
    color: #ec4d28;
  }
  .face5 {
    transform: rotateX(90deg) translateZ(100px);
    color: #efd81d;
  }
  .face6 {
    transform: rotateX(-90deg) translateZ(100px);
    color: #5ed4f4;
  }
}

@keyframes spincube {
  0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  16.67% { transform: rotateY(-90deg); }
  33.33% { transform: rotateY(-180deg); }
  50% { transform: rotateY(-270deg); }
  66.67% { transform: rotateX(90deg); }
  83.33% { transform: rotateX(-90deg); }
  100% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
}

调整后，立方体旋转时将完整展示6个面，每个面的3D定位准确，动画会依次切换到每个面的视角。

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