如何在 react.js 中显示 3d 立方体的所有 6 个面？

Question

因此，我正在创建我的网站组合，其中我有一个 3d 立方体在显示我熟悉的语言的关于页面中旋转，并且由于某种原因，当我想显示所有 6 个面时，只有 4 个面显示。 立方体按预期旋转，但由于某种原因，仅显示了 6 个面中的 4 个。

我的文件：

<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="#dd700" />
                        </div>
                        <div className="face6">
                            <FontAwesomeIcon icon={faReact} color="#5ED4F4" />
                        </div>
                    </div>
</div>

CSS 文件：

.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;
    margin-left: calc(50% - 100px);
  
    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;
    }
  
    .face1 {
      transform: translateZ(100px);
      color: #dd0031;
    }
    .face2 {
      transform: rotateY(90deg) translateZ(100px);
      color: #f06529;
    }
    .face3 {
      transform: rotateY(90deg) rotateX(90deg) translateZ(100px);
      color: #28a4d9;
    }
    .face4 {
      transform: rotateY(180deg) rotateZ(90deg) translateZ(100px);
      color: #5ed4f4;
    }
    .face5 {
      transform: rotateY(-90deg) rotateZ(90deg) translateZ(100px);
      color: #efd81d;
    }
    .face6 {
      transform: rotateX(-90deg) translateZ(100px);
      color: #ec4d28;
    }
  }
  
  @keyframes spincube {
    from,
    to {
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    16% {
      transform: rotateY(-90deg);
    }
    33% {
      transform: rotateY(-90deg) rotateZ(90deg);
    }
    50% {
      transform: rotateY(-180deg) rotateZ(90deg);
    }
    66% {
      transform: rotateY(-270deg) rotateX(90deg);
    }
    83% {
      transform: rotateX(90deg);
    }
  }

任何帮助深表感谢！

Answer 1

Your animation works for me on Chrome and Firefox although it gets janky after the 4th face, and different depending on the browser: https://stackblitz.com/edit/react-ts-15jx1h?file=style.scss

如果您在关键帧之间以不同的顺序应用变换，则由浏览器在每个关键帧之间插入正确的变换。 这可能会导致一些额外的随机方向旋转，即使最终的 state 是相同的。

为了使其保持一致，我建议将前一个关键帧的转换复制/粘贴到下一个，并为每个关键帧添加一个额外的 90 度。

@keyframes spincube {
  16% {
    transform: rotateY(-90deg);
  }
  33% {
    transform: rotateY(-90deg) rotateZ(90deg);
  }
  50% {
    transform: rotateY(-90deg) rotateZ(90deg) rotateX(-90deg);
  }
  66% {
    transform: rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg);
  }
  83% {
    transform: rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg)
      rotateZ(90deg);
  }
  100% {
    transform: rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg)
      rotateZ(90deg) rotateX(-90deg);
  }
}

固定版本： https://stackblitz.com/edit/react-ts-zbpcx2?file=style.scss